Question

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

强文

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

如果你想使用Multiupload文件，那就不是

$ _ FILES [＆＃39;文件＆＃39;] [＆＃39;名称＆＃39;]

很难

$ _ FILES [＆＃39;文件＆＃39;] [＆＃39;名称＆＃39;]

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

system.indexes

我希望这个帮助

Answer 2

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

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

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

来源：The jQuery Object

Ajax文件上传进度

2 个答案: