Nginx Tips: Php Uploading Progress Bar - 0010


Now the nginx-upload-module module has been added to Nginx, but it can not be used directly, there are still some preparatory work to be done.

Preparing JavaScript scripts

First, download or link jQuery.js directly, because modules need to cooperate with jQuery to control the progress of HTML element display.

<script type="text/javascript" src="/js/jquery.js"></script>




<script src=""></script>


The key is that you need another script: jquery.uploadProgress.js. Can from Download here.

Be careful

Don't forget to include the script in your page.
Likewise, since jQuery has changed and no longer supports $. browser.safari, we need to modify jquery.uploadProgress.js.
Put all such code:


Revised to:


The revised reference self Here The original intention is for IE, you can draw gourds like this.
The original text says:


as far of jquery 1.9 jQuery.browser was removed, adn admin_menu get this error:
"Uncaught TypeError: Cannot read property 'msie' of undefined" (admin_menu.js - line:223)

For quick fix use this code:
change line 223:
- if ($.browser.msie && parseInt(jQuery.browser.version) == 6) {
+ if (navigator.userAgent.match(/msie [6]/i)) {


Modify Nginx configuration file

First, you need to modify the / etc/nginx.conf file, increase the file size allowed to upload, and configure the size interval for uploading progress report, which is set to 50k a report.

http {
    # Basic Settings

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;
    # REV:igame@Dec-22-2013: Change size from 2m to 256m.
    client_max_body_size 256M;
    # REV:igame@Dec-22-2013: Followed the instruction of
    upload_progress proxied 50k;


Modify the location ~. PHP $section in the / etc/nginx/sites-available/default file. According to the guide, track_uploads must be the last line.

location ~ \.php$ {
    # track uploads in the 'proxied' zone
        # remember connections for 30s after they finished
        track_uploads proxied 30s;

And add the following:

location ^~ /progress {
    report_uploads proxied;

Using upload_progress_json_output is because jQuery parses data in JSON mode, and without this line, parsing fails and progress cannot be displayed.

Modify PHP configuration

Open the / etc/php5/fpm/php.ini file and modify the following:

; Whether to allow HTTP file uploads.
file_uploads = On

;post_max_size = 8M
post_max_size = 256M


; Maximum allowed size for uploaded files.
;upload_max_filesize = 2M
upload_max_filesize = 256M


Allow file upload and upload files up to 256M. If the document is too small, it will be finished in a flash, and you will not be able to see the progress.

Writing pages

Now write the upload page, assuming it's called learn.php, which reads as follows:

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.uploadProgress.js"></script>
    <!-- <script src=""></script> -->
        .bar {
          width: 300px;
        #progress {
          background: #eee;
          border: 1px solid #222;
          margin-top: 20px;

        #progressbar {
          width: 0px;
          height: 24px;
          background: #333;

<form id="form1" action="ulfile.php" method="POST" enctype="multipart/form-data">
Filename: <input type="file" name="file1" />
<input type="submit" value="Upload" />

<div id="uploading">
  <div id="progress" class="bar">
    <div id="progressbar"> </div>
    <div id="percents"></div>

<script type="text/javascript">
$(function() {
        /* scripts locations for safari */
        jqueryPath: "/js/jquery.js",
        uploadProgressPath: "/js/jquery.uploadProgress.js",
        start: function() {
            // Add start code here.
        /* function called each time bar is updated */
        uploading: function(upload) {
        /* selector or element that will be updated */
        progressBar: "#progressbar",

        /* progress reports url */
        progressUrl: "/progress",

        /* how often will bar be updated */
        interval: 500

Be careful

The page may not run on your machine because the script path is not consistent with your actual situation.

Then write the uploaded page, assuming the name is ulfile.php, which reads as follows:

  if ($_FILES["file1"])
    echo "Congratulations!<br />";

        if ($_FILES["file1"]["error"] > 0)
            echo "Error:" . $_FILES["file1"]["error"] . "<br />";
            echo "Source File: " . $_FILES["file1"]["name"] . "<br>";
            echo "Type: " . $_FILES["file1"]["type"] . "<br>";
            echo "Size: " . round($_FILES["file1"]["size"] / 1024) . " kB<br>";
            echo "Stored in: " . $_FILES["file1"]["tmp_name"];
            echo "<br />";
            $uploaddir = './upload/'; // /usr/share/nginx/www/upload/';
                        // Note that the English file name does not need to be decoded, but the Chinese file name does.
            // $uploadfile = $uploaddir . basename($_FILES['file1']['tmp_name']);
            $uploadfile = $uploaddir . html_entity_decode(basename($_FILES['file1']['name']));
            echo "Destination:" . $uploadfile . "<br />";
            if (move_uploaded_file($_FILES['file1']['tmp_name'], $uploadfile))
                echo "File successfully uploaded.<br />";
                /* If you don't want to save, just test progress bar, you can delete it immediately after uploading.
                if (!unlink($uploadfile))
                    echo "Can't delete the uploaded file.<br />";
                echo "Failed to save file.<br />";

Note that if you encounter directory problems, such as using upload directory here, and you don't, you need to create such a directory and set considerable permissions (root).
Okay, now you can enjoy your upload progress bar, be careful not to burst your hard drive.


The problems mainly focus on paths, such as js paths, directory permissions, fatal 413 errors and so on.

Keywords: Linux JQuery PHP Nginx Javascript

Added by Xyox on Sat, 12 Oct 2019 08:17:12 +0300