我如何使用jQuery和php上的jQuery的$ .ajax函數上傳文件

Question

我想用jQuery的$.ajax函數上傳文件，但沒有得到任何輸出。 有人請幫我解決這個問題。 我不知道這個腳本是否正確。 我的腳本是：

$.ajax({ 
    url:'newsup.php', 
    data: "", 
    type: 'POST', 
    contentType:'multipart/form-data', 
    dataType: 'json', 
    catche: 'false', 

    success:function(data6) 
    { 
    $("#disp").removeClass().addClass((data6.error=== false)? 'success':'error').html(data6.msg).fadeIn('fast'); 
    //dele(); 
    if($("#disp").hasClass('success')) 
    { 
     alert("success"); 
     setTimeout("$('#disp').fadeOut('slow')",3000);    
    } 
    }, 

    error:function(XMLHttpRequest,textStatus,errorThrown) 
    { 
    $("#disp").removeClass().addClass('error').html("There was an <strong>"+errorThrown+"</strong> error due to <strong>"+textStatus+" condition").fadeIn('fast'); 
    }    

}); 

此外，我需要幫助使用jQuery從文件上傳現場獲取數據。

Answer 1

AJAX不支持文件上傳。有像ajaxfileupload這樣的插件，它基本上創建了一個隱藏窗體並動態上傳你的文件。

看看here和閱讀奧利奇的回答

Answer 2

請使用插件此。
在我看來這個插件是更好的解決方案。你不需要記住所有選項等。只需將你的'ajax'替換爲'ajaxForm'。

請仔細閱讀例子，下面
http://jquery.malsup.com/form/#ajaxForm

Answer 3

您可以使用這兩個插件Jquery File Upload Plugins 1或Jquery File Upload Plugins 2，並有對這個腳本沒有錯誤。

希望它可以幫助

感謝， 拉希德

Answer 4

使用時只需在表格提交事件來發送文件，防止默認表單操作

$('#form').submit(function(e) { return false; });

，並獲取服務器上的文件側通過

$_FILES['inputName']; 

Answer 5

這就是我所做的。使用FormData對象。

注意：for語句的奇數語法只是將「f」設置爲數組[i]實例。

 $("#submit").click(function() { 
      var formData = new FormData(); 
      for (var i = 0, f; f = fileArray[i]; i++) { 
       formData.append("opmlFile", f); 
      } 
      $.ajax({ 
       url: "/Documents/SaveFiles/" + @Model, 
       type: "POST", 
       data: formData, 
       cache: false, 
       contentType: false, 
       processData: false 
      }) 
      .error(function (xhr, status, error) { 
       $.notify(error, true); 
      }) 
      .success(function (data, status, xhr) { 
       $.notify("Success"); 
      }); 
     }); 

不幸的是，我不記得哪一篇文章是我從中得到的，但它是Stack Overflow上的其他人。

Answer 6

的Ajax支持使用FORMDATA對象文件的上傳，而且除了IE8所有主要的瀏覽器支持/ 9 見下

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 7

我使用這個和它的正常工作：

$('#btnUploadFile').on('click', function() { 
       var data = new FormData(); 
       var files = $("#fileUpload").get(0).files; 

       // Add the uploaded file content to the form data collection 
       if (files.length > 0) { 
        data.append("upload", files[0]); 
       } 

       // Make Ajax request with the contentType = false, and procesDate = false 
       var ajaxRequest = $.ajax({ 
        type: "POST", 
        url: "/api/documents", 
        contentType: false, 
        processData: false, 
        data: data, 

        error: function (xhr, status, error) { 
         console.log(xhr); 
         console.log(status); 
         console.log(error); 
         console.log(data); 
        } 
       }); 

       ajaxRequest.done(function (xhr, textStatus) { 
        $("#response").attr('class', "alert alert-success"); 
        $("#response").html("File uploaded successfully"); 
       }); 


      });