Javascript Ajax文件上载进度

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

strong文本

     $('.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!";
    }
   ?>

如果我把这行改成

 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>

上载

如果您想使用多上传文件，请不要使用它

$\u文件['file']['name']

一定是

$\u文件['FILES']['name']

上载到服务器的访问多文件示例

$fileSelected = count($_FILES['files']['name']);
$_temp = 0;
foreach ($_FILES['files']['tmp_name'] as $key => $value) {
     $file_tmp = $_FILES['files']['tmp_name'][$key];
     if(move_uploaded_file($file_tmp, $folder)){
          //Upload successful
     }else{
          //Fail
     }
}

---

我希望这个帮助

FormData构造函数参数是HTML

元素。请尝试下面的代码

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

创建新元素（或选择现有元素）时，jQuery将返回集合中的元素。许多刚接触jQuery的开发人员都认为这个集合是一个数组。毕竟，它有一个DOM元素的零索引序列、一些熟悉的数组函数和.length属性。实际上，jQuery对象比这更复杂

---

来源：

您遇到的错误位于

upload.php

的第4行，因此应该是：

$path=$folder。basename（$_FILES['file']['name']）我会打印你的
$\u文件
。我打赌出于某种原因，它是空的。@RuslanasBalčIūnas updatedI也会
打印
$\u POST
和
$\u GET
，因为你告诉jQuery发布数据。。。像这样的一些例子让它看起来像是jQuery黑魔法之类的…@xbakesx是的，它是空的。这怎么可能。它打印完整的数组（）@xbakesx All数组不返回任何值。怎么样soNo不不我正在尝试不同的方法。我正在尝试增加我的上传按钮和输入类型文件。所以，每个上传按钮上传相应的文件为什么要添加2个答案。我的代码不是发布了html elment吗？它本来是要编辑的，但我想是发生了一些服务器故障。好的。请告诉我
$（'.selector'）。最近（'.class'）
返回了什么？不是html元素吗？为了完整性更新了我的答案。
$fileSelected = count($_FILES['files']['name']);
$_temp = 0;
foreach ($_FILES['files']['tmp_name'] as $key => $value) {
     $file_tmp = $_FILES['files']['tmp_name'][$key];
     if(move_uploaded_file($file_tmp, $folder)){
          //Upload successful
     }else{
          //Fail
     }
}

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