duanpi5733 2015-05-09 12:00
浏览 111
已采纳

Ajax文件上传进度

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>
  • 写回答

2条回答 默认 最新

  • douxin20081125 2015-05-09 12:27
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题