Ajax文件上传进度

Question

Well, I am trying to implement file upload with Ajax and Php in my local apache server.

strong text

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

  <?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!";
    }
   ?>

Error

<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

Line that caused error is:

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

If i change this line to

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

program works fine.

I can able to see the form data in the console by setting breakpoints in my js. I don't know how to solve this.

I am changing this to achieve multiple file upload functionality.

Please let me know how do i solve this issue. Thanks

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 constructor parameter is HTML <form> element. Try code below.

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.

Source: The jQuery Object