Question

I'm trying to upload multiple files with progress bars to show how much of the file has been uploaded. For some reason the files are not being uploaded and the progress bars only work for one upload. Please help me alter the code to work.

$('.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>

Answer 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);
    }
?>

Multiple file upload with progress bar

1 个答案: