带进度条的多个文件上传答案

【问题标题】：Multiple file upload with progress bar带进度条的多个文件上传
【发布时间】：2015-10-19 07:43:03
【问题描述】：

我正在尝试上传多个带有进度条的文件，以显示已上传了多少文件。由于某种原因，文件未上传，进度条仅适用于一次上传。请帮我修改代码以使其正常工作。

$('.btnUpload').click(function(){
    //submit all form
    $('form').submit();
});
$(document).on('submit','form',function(e){
    e.preventDefault();

    $form = $(this);

    uploadImage($form);

});

function uploadImage($form){
    alert("in");
    $form.find('.progress-bar')
    var formdata = new FormData($form[0]); //formelement
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress',function(e){
        var percent = Math.round(e.loaded/e.total * 100);
        $form.find('.progress-bar').width(percent+'%').html(percent+'%');
    });

    //progress completed load event
    request.addEventListener('load',function(e){
        $form.find('.progress-bar').html('upload completed....');
    });

    request.open('post', 'upload.php');
    request.send(formdata);

    $form.on('click','.cancel',function(){
        request.abort();

        $form.find('.progress-bar')
            .html('upload aborted...');
    });

}/*
function uploadFile(){
    $(document).ready(function (e) {
        $("#uploadForm").on('submit',(function(e) {
            e.preventDefault();
            $.ajax({
                url: "upload.php",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                success: function(data){
                    $("#gallery").html(data);
                },
                xhrFields: {
                    // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
                    onprogress: function (progress) {
                        // calculate upload progress
                        var percentage = Math.floor((progress.total / progress.totalSize) * 100);
                        // log upload progress to console
                        console.log('progress', percentage);
                        if (percentage === 100) {
                            console.log('DONE!');
                        }
                    }
                },
                processData:false,

                error: function(){}
            });
        }));
    });
}*/

<html>
<head>
<title>PHP AJAX Multiple Image Upload</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <SCRIPT SRC="upload.js"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="gallery-bg">
<form id="uploadForm" action="" method="post">
<div id="gallery">No Images in Gallery</div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Upload Multiple Image:</p>
<p><input name="userImage[]" type="file" class="inputFile" /><p>
    <div class="progress">
        <div class="progress-bar" style="width:0%"></div>
        </div>

<p><input name="userImage[]" type="file" class="inputFile" /><p>
    <div class="progress">
        <div class="progress-bar" style="width: 0%;">
        </div>
    </div>
<p><input name="userImage[]" type="file" class="inputFile" /><p>
    <div class="progress">
        <div class="progress-bar" style="width: 0%;">
        </div>
    </div>

<p><input type="submit" value="Submit" class="btnUpload"  /></p>
</div>
</form>
</div>

<!-- begin snippet: js hide: false -->

</body>
</html>

【问题讨论】：

不要使用 ready() mid-ajax 回调，直接运行代码

标签： javascript jquery html css

【解决方案1】：

这不是您问题的答案，而是您问题的解决方案。

您发布的内容会将文件发送到服务器，但是一旦它们到达那里，它们就会保存在沙盒中——它们一旦到达那里就必须进行“处理”，否则它们将不会被存储。因此，您必须用您的后端语言（PHP 或 ASP.Net 等）编写一个处理器应用程序来处理文件（验证它们，将它们移动到它们应该在的文件夹中，等等）。

如果你的后端是 PHP，你会考虑切换到 Ravishanker Kusuma 的 jQuery Upload File Plugin 吗？我尝试了一堆文件上传插件，发现 Ravi 是最好的。在我所有的项目中使用它。试试他的例子（上面的链接） - 这很简单。

1) 包含 Hayageek 脚本

2) 添加一个div，成为动态上传按钮/字段

<div id="fileuploader">Upload</div>

3) 添加这个 jQuery 代码：

$("#fileuploader").uploadFile({
    url:"name_of_your_php_file_that_receives_the_files.php",
    fileName:"myfile" //you will use this varname in the php file
});

该 PHP 文件将如下所示：

<?php
    $output_dir = "uploads/";
    if(isset($_FILES["myfile"])) {
        $ret = array();

        if(!is_array($_FILES["myfile"]["name"])) {
            //just one file
            $fileName = $_FILES["myfile"]["name"];
            move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
            $ret[]= $fileName;
        }
        else  //Multiple files, file[]
        {
          $fileCount = count($_FILES["myfile"]["name"]);
          for($i=0; $i < $fileCount; $i++)
          {
            $fileName = $_FILES["myfile"]["name"][$i];
            move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
            $ret[]= $fileName;
          }

        }
        echo json_encode($ret);
    }
?>

【讨论】：

我确实有将图像发送到文件夹的 php 脚本。但是谢谢会尝试
我设法上传了所有文件，但进度条只听一个上传。
多个进度条请看我的回答stackoverflow.com/questions/31721400/…