Php Script for File Upload Image

Php Script for File Upload

This Script allow you to handle all file uploads from your website and store them locally or even online with Amazon S3. This is a very easy to use script, that replace all core functions of the php language (fopen, fwrite…) to make it simple for even users with no development experience to use this script with ease.

This script was created for people that need to add file upload functionality in their site. It uses AJAX technology to send the file from the client to the server and after that, it will save it in a temp-folder and the client can either download the file or delete it. This script are compatible with all browsers.

Configure the PHP Settings

There are a couple of PHP configuration settings that you’ll want to check beforehand for successful file uploads. In this section, we’ll go through every important option in regards to PHP file upload. These options can be configured in the php.ini file.

If you’re not sure where to find your php.ini file, you can use the php_ini_loaded_file() to locate it. Just create a PHP file on your server with the following line, and open it from the browser.

1<?php echo php_ini_loaded_file(); ?>

Here’s an excerpt from a setup file with some useful defaults.

01020304050607080910111213141516171819; Whether to allow HTTP file uploads.file_uploads = On ; Temporary directory for HTTP uploaded files.; Will use system default if not set.;upload_tmp_dir =  ; Maximum allowed size for uploaded files.upload_max_filesize = 16M ; Maximum number of files that can be uploaded via a single requestmax_file_uploads = 20 ; Maximum size of POST data that PHP will accept.post_max_size = 20M max_input_time = 60memory_limit = 128Mmax_execution_time = 30

The Key Settings

file_uploads

The value of the file_uploads directive should be set to On to allow file uploads. The default value of this directive is On.

upload_max_filesize

The upload_max_filesize directive allows you to configure the maximum size of the uploaded file. By default, it’s set to 2M (two megabytes), and you can override this setting using the .htaccess file as well. Two megabytes isn’t very much by today’s standards, so you might have to increase this. If you get an error that file exceeds upload_max_filesize when you try to upload a file, you need to increase this value. If you do, be sure to also increase post_max_size (see below).

upload_tmp_dir

Sets a temporary directory which will be used to store uploaded files. In most cases, you don’t need to worry about this setting. If you don’t set it, the system default temp directory will be used.

post_max_size

The post_max_size directive allows you to configure the maximum size of POST data. Since files are uploaded with POST requests, this value must be greater than what you’ve set for the upload_max_filesize directive. For example, if your upload_max_filesize is 16M (16 megabytes), you might want to set post_max_size to 20M.

max_file_uploads

It allows you to set the maximum number of files that can be uploaded at a time. The default is 20, a sensible amount.

max_input_time

It’s the maximum number of seconds a script is allowed to parse the input data. You should set it to a reasonable value if you’re dealing with large file uploads. 60 (60 seconds) is a good value for most apps.

memory_limit

The memory_limit directive indicates the maximum amount of memory a script can consume. If you’re facing issues when uploading large files, you need to make sure that the value of this directive is greater than what you’ve set for the post_max_size directive. The default value is 128M (128 megabytes), so unless you have a very large post_max_size and upload_max_filesize, you don’t need to worry about this.

max_execution_time

It’s the maximum number of seconds a script is allowed to run. If you’re facing issues when uploading large files, you can consider increasing this value. 30 (30 seconds) should work well for most apps.

Now let’s build a real-world example to demonstrate file upload in PHP.

The upload file PHP script

PHP has a global array $_FILES, to handle the file upload. This array returns the following data of the uploaded files. Suppose the name of the input field to upload file is ‘attachment‘, then we will get the following array after uploading the file –

$_FILES['attachment']['name']

$_FILES['attachment']['type']

$_FILES['attachment']['size']

$_FILES['attachment']['tmp_name']

$_FILES['attachment']['error']

Create the HTML Form

Once you’ve configured the PHP settings, you’re ready to try out the PHP file upload capabilities.

Our GitHub repo has some sample code which I’m going to discuss throughout this article. So, if you want to follow along, go ahead and download it from GitHub.

We’re going to create two PHP files: index.php and upload.php. The index.php file holds code which is responsible for displaying the file upload form. On the other hand, the upload.php file is responsible for uploading a file to the server.

Also, a file will be uploaded in the uploaded_files directory, so you need to make sure that this folder exists and is writable by the web-server user.

In this section, we’ll go through the key parts of the index.php file.

Let’s take a look at the index.php file on GitHub:

0102030405060708091011121314151617181920212223242526<?phpsession_start(); ?><!DOCTYPE html><html><head>  <title>PHP File Upload</title></head><body>  <?php    if (isset($_SESSION['message']) && $_SESSION['message'])    {      echo '<p class="notification">'.$_SESSION['message']).'</p>';      unset($_SESSION['message']);    }  ?>  <form method="POST" action="upload.php" enctype="multipart/form-data">    <div class="upload-wrapper">      <span class="file-name">Choose a file...</span>      <label for="file-upload">Browse<input type="file" id="file-upload" name="uploadedFile"></label>    </div>     <input type="submit" name="uploadBtn" value="Upload" />  </form></body></html>

You can use the following CSS to give the form a more appealing look.

01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849div.upload-wrapper {  color: white;  font-weight: bold;  display: flex;} input[type="file"] {  position: absolute;  left: -9999px;} input[type="submit"] {  border: 3px solid #555;  color: white;  background: #666;  margin: 10px 0;  border-radius: 5px;  font-weight: bold;  padding: 5px 20px;  cursor: pointer;} input[type="submit"]:hover {  background: #555;} label[for="file-upload"] {  padding: 0.7rem;  display: inline-block;  background: #fa5200;  cursor: pointer;  border: 3px solid #ca3103;  border-radius: 0 5px 5px 0;  border-left: 0;}label[for="file-upload"]:hover {  background: #ca3103;} span.file-name {  padding: 0.7rem 3rem 0.7rem 0.7rem;  white-space: nowrap;  overflow: hidden;  background: #ffb543;  color: black;  border: 3px solid #f0980f;  border-radius: 5px 0 0 5px;  border-right: 0;}

The CSS basically hides the original file input and styles its accompanying span and label elements.

Although it may look like a typical PHP form, there’s an important difference in the value of the enctype attribute of the <form> tag. It needs to be set to multipart/form-data since the form contains the file field.

The enctype attribute specifies the type of encoding which should be used when the form is submitted, and it takes one of the following three values:

  • application/x-www-form-urlencoded: This is the default value when you don’t set the value of the enctype attribute explicitly. In this case, characters are encoded before it’s sent to the server. If you don’t have the file field in your form, you should use this value for the enctype attribute.
  • multipart/form-data: When you use the multipart/form-data value for the enctype attribute, it allows you to upload files using the POST method. Also, it makes sure that the characters are not encoded when the form is submitted.
  • text/plain: This is generally not used. With this setting, the data is sent unencoded.

Next, we output the file field, which allows you to select a file from your computer.

1<input type="file" name="uploadedFile" />

Apart from that, we’ve displayed a message at the top of the form. This message shows the status of the file upload, and it’ll be set in a session variable by the upload.php script. We’ll look more at this in the next section.

1234567<?php    if (isset($_SESSION['message']) && $_SESSION['message'])    {      echo '<p class="notification">'.$_SESSION['message']).'</p>';      unset($_SESSION['message']);    }  ?>

So that sums up the index.php file. In the next section, we’ll see how to handle the uploaded file on the server side.

Conclusion

With this file upload application you can manage your files within your web site. To use it, you only need to make a call to action that will allow your visitors to upload their files – it could be a button or input field.

Similar Posts

0 Comments

No Comment.