Use Session and Javascript in PHP to implement the File Upload progress bar Function

This article mainly introduces how to use Session and Javascript in PHP to implement the File Upload progress bar function. This article explains the implementation principle and provides complete implementation code. For more information, see

This article mainly introduces how to use Session and Javascript in PHP to implement the File Upload progress bar function. This article explains the implementation principle and provides complete implementation code. For more information, see

Web applications often need to provide File Upload functions. Typical scenarios include user avatar upload and album Image Upload. When the file to be uploaded is large, it is necessary to provide a progress bar showing the upload progress.

Before PHP 5.4, it was not easy to implement such a progress bar. There are three main methods:

1. Use Flash, Java, ActiveX
2. Use php apc Extension
3. Use the HTML5 File API

The first method relies on third-party browser plug-ins, which are not universally available and may cause security risks. However, because Flash is widely used, many websites still use Flash as a solution.

The disadvantage of the second method is that it needs to install the php apc extension library and requires the user to be able to control the server configuration. In addition, if the installation of APC is only for the purpose of implementing an upload progress bar, it is obviously a bit cool.

The third method should be the most ideal method. You only need to use Javascript on the browser without server support. However, because HTML5 standards have not yet been established and the support of browser vendors is also different, this method is still difficult to popularize.

The session-based upload progress monitoring function (session. upload_progress) introduced in PHP 5.4 provides a server-side upload progress monitoring solution. After upgrading to PHP 5.4, you do not need to install the APC extension. You can only use native PHP and front-end Javascript to implement the upload progress bar.

Next we will introduce in detail the new session. upload_progress of PHP 5.4.

Principles

When the browser uploads a file to the server, PHP stores the detailed information (such as the upload time and progress) of the file in the session. Then, the information in the session is updated periodically as the upload progresses. In this way, the browser can use Ajax to periodically request a server script, which returns the progress information in the session. The browser Javascript can display/update the progress bar based on the information.

How is the file upload information stored? How do we access it? The following is a detailed description.

Some configuration items are introduced in PHP 5.4 (set in php. ini)

The Code is as follows:

Session. upload_progress.enabled = "1"
Session. upload_progress.cleanup = "1"
Session. upload_progress.prefix = "upload_progress _"
Session. upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
Session. upload_progress.freq = "1%"
Session. upload_progress.min_freq = "1"

Enabled controls whether the upload_progress function is enabled by default. cleanup sets whether to clear session information after the File Upload request is submitted. It is enabled by default.

Prefix and name are used to set the variable name/key name that the progress information is stored in the session. The detailed use of these two items is described below.

Freq and min_freq are used to set the update frequency of server-side progress information. Reasonable settings can reduce the burden on the server.

In the form of an uploaded file, you need to set an identifier for this upload and use this identifier to reference the progress information in the following process. Specifically, a hidden input is required in the upload form, and its name attribute is php. session in ini. upload_progress.name; its value is an identifier defined by you. As follows:

The Code is as follows:

Value = "test"/>

After receiving the file upload form, PHP creates a new key in the $ _ SESSION variable. The key name is a session. the value of upload_progress.prefix is connected with the above custom identifier to obtain the string, as shown in the following code:

The Code is as follows:

$ Name = ini_get ('session. upload_progress.name ');
$ Key = ini_get ('session. upload_progress.prefix'). $ _ POST [$ name];

$ _ SESSION [$ key]; // the progress of this file upload

$ _ SESSION [$ key] the structure of this variable is as follows:

The Code is as follows:

$ _ SESSION ["upload_progress_test"] = array (
"Start_time" => 1234567890, // start time
"Content_length" => 57343257, // The total Data Length of the POST request
"Bytes_processed" => 453489, // The length of the received data
"Done" => false, // whether the request is completed. true indicates that the request is completed. false indicates that the request is not completed.

// Information of a single file
"Files" => array (
0 => array (...),
// The same request may contain multiple files
1 => array (...),
)
);

In this way, we can use content_length and bytes_processed to get the progress percentage.

Program example

After the principles are introduced, we will complete the implementation of a file upload progress bar based on PHP and Javascript.

Upload form

First, compile index. php on the upload form page. The Code is as follows:

The Code is as follows:

0%

Note that the session. upload_progress.name hidden item in the form is set to test. There is only one file in the form to upload input. You can add multiple files if needed.

Pay special attention to the target attribute of the form, which points to an iframe on the current page. This is critical. By setting the target attribute, the page after the form is submitted is displayed in iframe to avoid the current page Jump. Because we have to display the progress bar on the current page.

# Progress p is used to display the progress bar.

Remember to add session_start () at the beginning of index. php ().

Process uploaded files

The action of the form points to upload. php. We process the uploaded file in upload. php and store it to the current directory. This is no different from normal upload processing.

The Code is as follows: