Javascript 显示多文件上传Jquery/Ajax的进度

我有一个上传表单，允许用户上传多个文件。我决定如果文件很大的话，一个进度条会很好。下面是我的源代码。我不熟悉jquery，通常我只会使用php，但我发现ajax对用户更友好

<div id="new_upload">
    <div class="close_btn"></div>
    <div id="uploads"></div>
    <form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
    <fieldset><legend>Upload an image or video</legend>
    <input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
    </fieldset>

    <div class="bar">
        <div class="bar_fill" id="pb">
            <div class="bar_fill_text" id="pt"></div>
        </div>
    </div>

    </form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){    
    //Progress bar
    console.log(total);
    $('#pb').width(percentComplete + '%') //update progressbar percent complete
    $('#pt').html(percentComplete + '%'); //update status text
}
function beforeSubmit(){
    console.log('ajax start');
}
function afterSuccess(data){
    console.log(data);
}
$(document).ready(function(e) {
    $('#upload_file').submit(function(event){
        event.preventDefault();
        var filedata = document.getElementById("file");
        formdata = new FormData();
        var i = 0, len = filedata.files.length, file;
         for (i; i < len; i++) {
            file = filedata.files[i];
            formdata.append("file[]", file);
        }
        formdata.append("json",true);
        $.ajax({
            url: "global.func/file_upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            dataType:"JSON",
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            beforeSubmit: beforeSubmit,
            uploadProgress:OnProgress, 
            success: afterSuccess,
            resetForm: true
        });
    });
});
</script>

上传图像或视频
函数OnProgress（事件、位置、总数、完成百分比）{
//进度条
控制台日志（总计）；
$（'#pb'）.width（完成百分比+'%'）//更新进度条完成百分比
$（'#pt'）.html（完成百分比+'%'）；//更新状态文本
}
函数beforeSubmit（）{
log（'ajax start'）；
}
函数成功后（数据）{
控制台日志（数据）；
}
$（文档）.ready（函数（e）{
$（“#上传文件”）.submit（函数（事件）{
event.preventDefault（）；
var filedata=document.getElementById（“文件”）；
formdata=新的formdata（）；
var i=0，len=filedata.files.length，file；
对于（i；i

图像上传工作正常，数组发送到ajax，但进度条不移动。事实上，调用的两个函数的console.log也不会出现。是否有一种正确的方法来调用ajax请求中的函数，从而使进度条正常工作

提交前：提交前， 上传进度：OnProgress， 成功：成功之后

---

请注意，此函数“success:afterSuccess”在控制台显示我的数据时起作用。

您必须使用自定义的XMLHttpRequest来使用AJAX和jQuery完成此操作。这里有一个例子：

这是您的HTML表单

<form method="post" action="uploadImages.php" name ='photo' id='imageuploadform' enctype="multipart/form-data">
        <input hidden="true" id="fileupload" type="file" name="image[]" multiple >

        <div id ="divleft">
            <button id="btnupload"></button>

        </div>    

    </form>

您的php代码如下所示

<?php

header('Content-Type: application/json');

       $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
        $max_size = 30000 * 1024; // max file size in bytes

        $json = array();

            if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
            {
                for($i=0;$i<count($_FILES['image']['tmp_name']);$i++)
                {
                    $path="image/uploads/photos/";

                    if(is_uploaded_file($_FILES['image']['tmp_name'][$i]) )
                    {
                      // get uploaded file extension
                      $ext = strtolower(pathinfo($_FILES['image']['name'][$i], PATHINFO_EXTENSION));
                      // looking for format and size validity
                          if (in_array($ext, $valid_exts) AND $_FILES['image']['size'][$i] < $max_size)
                          {
                                  // unique file path
                                  $uid = uniqid();
                                  $date = date('Y-m-d-H-i-s');
                                  $path = $path ."image_" .$date. '_' . $uid . "." .$ext;

                                  $returnJson[]= array("filepath"=>$path);

                                  $filename = "image_" . $date . "_" .$uid . "." . $ext;
                                  $this->createthumb($i,$filename);

                                    // move uploaded file from temp to uploads directory
                                  if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $path))
                                  {
                                    //$status = 'Image successfully uploaded!';
                                      //perform sql updates here

                                  }
                                  else {
                                    $status = 'Upload Fail: Unknown error occurred!';
                                  }


                          }
                          else {
                            $status = 'Upload Fail: Unsupported file format or It is too large to upload!';
                          }
                    }
                    else {
                      $status = 'Upload Fail: File not uploaded!';
                    }
                }
              }
            else {
              $status = 'Bad request!';
            }


            echo json_encode($json);

?>

处理这个问题的是xhr:function（）而不是uploadprogress，Thnkyou为什么不检查Eskinder的答案？对我来说似乎更完整。当测试这个本地主机时，我只得到了100%的事件。本地上传自然非常快。限制网络以查看增量事件。与@Gunslinger相同，但我正在发送到远程服务器。使用5MB或更大的文件调用会立即完全按照预期进行。然而，使用2MB左右的小（er）文件永远不会调用progress。只需要大约10秒的延迟，然后用100调用progress…当然，这就是本地上传时的工作方式。

<?php

header('Content-Type: application/json');

       $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
        $max_size = 30000 * 1024; // max file size in bytes

        $json = array();

            if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
            {
                for($i=0;$i<count($_FILES['image']['tmp_name']);$i++)
                {
                    $path="image/uploads/photos/";

                    if(is_uploaded_file($_FILES['image']['tmp_name'][$i]) )
                    {
                      // get uploaded file extension
                      $ext = strtolower(pathinfo($_FILES['image']['name'][$i], PATHINFO_EXTENSION));
                      // looking for format and size validity
                          if (in_array($ext, $valid_exts) AND $_FILES['image']['size'][$i] < $max_size)
                          {
                                  // unique file path
                                  $uid = uniqid();
                                  $date = date('Y-m-d-H-i-s');
                                  $path = $path ."image_" .$date. '_' . $uid . "." .$ext;

                                  $returnJson[]= array("filepath"=>$path);

                                  $filename = "image_" . $date . "_" .$uid . "." . $ext;
                                  $this->createthumb($i,$filename);

                                    // move uploaded file from temp to uploads directory
                                  if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $path))
                                  {
                                    //$status = 'Image successfully uploaded!';
                                      //perform sql updates here

                                  }
                                  else {
                                    $status = 'Upload Fail: Unknown error occurred!';
                                  }


                          }
                          else {
                            $status = 'Upload Fail: Unsupported file format or It is too large to upload!';
                          }
                    }
                    else {
                      $status = 'Upload Fail: File not uploaded!';
                    }
                }
              }
            else {
              $status = 'Bad request!';
            }


            echo json_encode($json);

?>