PHP File Upload progress bar Implementation Program

Last Update:2013-11-17 Source: Internet

Author: User

Tags file upload progress bar php file upload

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

There are many methods to implement the upload progress bar in php. For example, ajax is currently the mainstream or iframe is used. Now we will introduce the php apc and uploadprogress to implement the File Upload progress bar effect.

Currently, I know two methods: one is to use the APC extension module written by Rasmus Lerdorf, founder of PHP to implement (http://pecl.php.net/package/apc ), another way is to use the PECL extension module uploadprogress implementation (http://pecl.php.net/package/uploadprogress) I here are two examples of implementation respectively for reference, more flexible application according to their own needs to modify.

APC implementation method:

Install APC by referring to the official documentation. You can use the PECL module to install APC quickly and easily.
Configure php. ini and set the parameter apc. rfc1867 = 1 to enable APC to support the upload progress bar function, which is described in the APC source code instructions.
Sample Code:

The Code is as follows:

Copy code

If ($ _ SERVER ['request _ method'] = 'post') {// upload REQUEST
$ Status = apc_fetch ('upload _ '. $ _ POST ['apc _ UPLOAD_PROGRESS']);
$ Status ['done'] = 1;
Echo json_encode ($ status); // ajax call output to the user's page. Please find the relevant documentation
Exit;
} Elseif (isset ($ _ GET ['ss SS _ key']) {// read the upload progress
$ Status = apc_fetch ('upload _ '. $ _ GET ['ss SS _ key']);
Echo json_encode ($ status );
Exit;
} Else {
// Other code, such as uploading a form
}

Implementation of the uploadprogress module:
Use the PECL module Installation Method to install this module
Set uploadprogress. file. filename_template = "/tmp/upd_%s.txt" in php. ini"

Sample Code:

The Code is as follows:

Copy code

If ($ _ SERVER ['request _ method'] = 'post '){
If (is_uploaded_file ($ _ FILES ['upfile'] ['tmp _ name']) {
$ Upload_dir = 'your _ path /';
$ Ext = strrchr ($ _ FILES ['video'] ['name'], '.');
$ Sessid = $ _ POST ['upload _ IDENTIFIER '];
$ Tmpfile = $ upload_dir. $ sessid;
$ Sessfile = $ upload_dir. $ sessid. $ ext;
If (move_uploaded_file ($ _ FILES ['upfile'] ['tmp _ name'], $ tmpfile )){
// Upload successful
} Else {
// Upload Failed
} Else {
// Upload Error

} Elseif (! Empty ($ _ GET ['sessid ']) {
Header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT ");
Header ("Last-Modified:". gmdate ("D, d m y h: I: s"). "GMT ");
Header ("Cache-Control: no-store, no-cache, must-revalidate ");
Header ("Cache-Control: post-check = 0, pre-check = 0", false );
Header ("Pragma: no-cache ");
Header ("Content-Type: text/html; charset = UTF-8 ");

$ Unique_id = $ _ GET ['sessid'];
$ Uploadvalues = uploadprogress_get_info ($ unique_id );

If (is_array ($ uploadvalues )){
Echo json_encode ($ uploadvalues );
} Else {
// Read progress failed. Additional processing logic
}

} Else {
// Display the upload form
}

Integration

The rest is to hook all the content together. You can perform this operation on the progress. php page.

Listing 5. Final progress. php page

The Code is as follows:

Copy code

<? Php
$ Id = uniqid ("");
?>
<Html>
<Head> <title> Upload Example </title> <Body>

<Script src = "http://maps.google.com/maps? File = api & v = 2 & key = <yourkeyhere>"
Type = "text/javascript"> </script>

Function getProgress (){
GDownloadUrl ("getprogress. php? Progress_key = <? Php echo ($ id)?> ",
Function (percent, responseCode ){
Document. getElementById ("progressinner"). style. width = percent + "% ";
If (percent <100 ){
SetTimeout ("getProgress ()", 100 );
}
});

}

Function startProgress (){
Document. getElementById ("progressouter"). style. display = "block ";
SetTimeout ("getProgress ()", 1000 );
}

</Script>

<Iframe id = "theframe" name = "theframe"
Src = "upload. php? Id = <? Php echo ($ id)?> "
Style = "border: none; height: 100px; width: 400px;">
</Iframe>
<Br/>

</Body>
</Html>

Starting from the bottom layer, we have added the iframe of the upload. php script embedded in Listing 1, providing it with a unique ID generated at the top of the page.

Do you still remember the Submit button in this form?

The Code is as follows:	Copy code
<Input onclick = "window. parent. startProgress (); return true ;" Type = "submit" value = "Upload! "/>

This button completes two tasks. Submit a form, just like a normal Submit button; but before performing this operation, it will call the startProgress () script in the main window. The startProgress () script tells the progress bar to display itself -- no properties are displayed at the beginning, then tells the browser to wait for one second, and then executes the getProgress () script.

Now, the getProgress () script will make things interesting. Do you remember that I mentioned earlier that I would need to use Ajax or a similar method to check the file progress? In this example, the form uses shortcuts to call the GdownloadUrl () function from the Google Maps API Library (note that the form will be imported to the library at the top of the page. You will need to obtain your own accesskey for accessing this database, but it is free from Google ).

This function downloads the URL content -- in this example, the getprogress. php script -- and runs the anonymous function defined in it. The first parameter accepted by the function is the data returned from the URL. In this example, the percentage is used to update the progress bar. Finally, if the file has not been downloaded, tell the browser to retry every tenth of a second (in actual situations, these calls may not be executed so quickly, but the browser will do its best ).

The final result is that the page allows the user to view the progress of the file being uploaded.

If the file is too large, perform the following operations:

PHP restricts the size of the uploaded files first:

Check the following lines in php. ini:

Upload_max_filesize = 8 M

Post_max_size = 10 M

Memory_limit = 20 M

Change these values to what I said to see if there are any problems. In addition, make sure that there is no line similar to the following in the uploaded <form>.

<Input type = "hidden" name = "MAX_FILE_SIZE" value = "500000"> This restricts the upload size.

PHP restricts the second size of the uploaded file:

If apache 2 needs to be modified

/Etc/httpd/conf. d/php. conf

In, change LimitRequestBody 524288 to 524288 (= 512 × 1024), for example, 5 M (= 5 × 1024 × 1024)

After PHP restricts the size of the uploaded file, the file upload will not encounter the above problem. The upload will not respond, and the upload will be solved if the page cannot be uploaded!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More