News Stay informed about the latest enterprise technology news and product updates.

Create an HTML5 and PHP file upload form for Apache example

If you have an Apache web server and your goal is to code an HTML5 and PHP file upload component, you’ll be delighted to know that modern browsers along with simplified server-side APIs make the process incredibly simple, at least in comparison to the effort such a task required just five or ten years ago.

PHP file uploader

These are the steps required to create an HTML5 file input form and a PHP server-side component to handle the file upload process include:

  1. Create a web page that contains an HTML5 file input form element
  2. From the web page, invoke a sever-side PHP file that can save the uploaded file
  3. Receive the file upload in the PHP file and save the file locally
  4. Send a response back to inform the client the PHP file upload was successful

HTML5 file selector

JavaScript file upload

Required HTML5 and PHP Hoqwfile upload components.

The HTML5 API introduced a new type of input tag named file. When this HTML5 file input tag is used, a web browser will render a file selector which allows a user to search for files anywhere on their local file system. When this input tag is associated with a submit button and wrapped within an HTML form tag, it becomes possible for the client to upload a file to the server through a Chrome or Firefox browser.

The following code needs to be saved in a file name uploader.html and saved to the htdocs folder of the Apache HTTP Server (AHS).

<!DOCTYPE html> 
<html> 
 <head> 
  <title> HTML5 PHP File Upload Example </title> 
 </head> 
 <body>

  <!-- HTML5 Input Form  -->
  <form action="upload.php" method="post" enctype="multipart/form-data" > 
    <input id="file" type="file" name="file" /> 
    <input id="html5-upload-button" type="button" value="Upload" /> 
  </form> 

 </body> 
</html>

PHP file upload component

The HTML5 file input form calls a server-side resource named upload.php. This component simply saves the uploaded file to a folder named upload in the Apache server’s htdocs directory.

Website Performance Tips and Tricks

Here’s how to improve how your website performs:

Follow these steps and web performance won’t be your problem.

Save the following code in a file named upload.php, and place it in the same htdocs folder as the uploader.html file:


<html>
<body>
<?php

/* Get the name of the file uploaded to Apache */
$filename = $_FILES['file']['name'];

/* Prepare to save the file upload to the upload folder */
$location = "upload/".$filename;

/* Permanently save the file upload to the upload folder */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
  echo '<p>The HTML5 and php file upload was a success!</p>'; 
} else { 
  echo '<p>The php and HTML5 file upload failed.</p>'; 
}

?>
</body>
</html>

To support the PHP file upload component, a folder named upload must be created in the Apache server’s htdocs directory. This folder is where the HTML5 file uploads will be saved. For Apache on Linux, a 775 chmod operation will be required on this folder to give the PHP file upload component rights to write images and other files to this directory.

Run the PHP file upload example

With the folder created and both the HTML5 and PHP file upload components coded, the application can be run by accessing the uploader.html file through a web browser such as Chrome of Firefox. When the program runs, the user will be able to select a file, and when the submit button is clicked, the file will be uploaded to the server and a confirmation message will be displayed.

PHP file upload example

Both HTML, PHP and even JavaScript can be used to upload files. In this example, JavaScript and Ajax calls invoke the server-side PHP file upload script.

 

 

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

SearchAppArchitecture

SearchSoftwareQuality

SearchCloudComputing

SearchSecurity

SearchAWS

Close