javascript - Ajax文件上传进度

Question

嗯，我正在尝试在本地 apache 服务器中使用 Ajax 和 Php 实现文件上传。

强文字

     $('.uploadButton').click(function(){
                    var formData = new FormData($(this).closest('.fileUploadForm'));
                    $.ajax({
                        url: 'upload.php',  //Server script to process data
                        type: 'POST',
                        xhr: function() {  // Custom XMLHttpRequest
                            var myXhr = $.ajaxSettings.xhr();
                            if(myXhr.upload){ // Check if upload property exists
                                myXhr.upload.onprogress = function(e) {
                                    $('progress').attr({value:e.loaded,max:e.total});
                                    $(".progress-bar span").css('width',e.loaded);
                                };
                            }
                            return myXhr;
                        },
                        error: function(xhr,status,error)
                        {
                            //$('.progressBarDiv progress').hide();
                            console.log('Error '+xhr+"  "+status+"  "+error);
                        },
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false
                    });

PHP 代码

  <?php

    $folder = "upload/";
    $path = $folder . basename( $_FILES['file']['name']); 

    if(move_uploaded_file($_FILES['file']['tmp_name'], $path)) {
    echo "The file ".  basename( $_FILES['file']['name']). " has been uploaded";
    } else{
    echo "There was an error uploading the file, please try again!";
    }
   ?>

错误

<b>Notice</b>:  Undefined index: file in <b>C:\Users\gopir\Server\Apache24\ 
\htdocs\front-page\upload.php</b> on line <b>4</b><br /><br />
<b>Notice</b>:  Undefined index: file in <b>C:\Users\gopir\Server\Apache24 
\htdocs\front-page\upload.php</b> on line <b>6</b><br />
 There was an error uploading the file, please try again!   success

导致错误的行是:

  var formData = new FormData($(this).closest('.fileUploadForm'));

如果我将此行更改为

 var formData = new FormData($('form')[0])

程序运行良好。

我可以通过在我的js中设置断点来在控制台中查看表单数据。 我不知道如何解决这个问题。

我正在更改此设置以实现多个文件上传功能。

请让我知道如何解决这个问题。谢谢

HTML

  <form enctype="multipart/form-data" class="fileUploadForm" >
        <div class="uploadDiv"> 
            </div>
            <div class="progressUploadDiv">     
                <div class="uploadButton">Upload</div>
            </div>  
        </div>
    </form>

Answer 1

FormData 构造函数参数为 HTML <form>元素。尝试下面的代码。

var formData = new FormData($(this).closest('.fileUploadForm')[0]);

When creating new elements (or selecting existing ones), jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. It has a zero-indexed sequence of DOM elements, some familiar array functions, and a .length property, after all. Actually, the jQuery object is more complicated than that.

来源:The jQuery Object