帶有AJAX的文本內容和文件上傳

Question

我正在爲我的公司寫一個客戶端數據庫系統。沒有多少花哨的東西，但它做它應該的。 現在所有的基本「文本」東西都完成了，我想添加一些文件管理。

我有幾種形式使用ajax發送到後端，然後寫入模型中的數據庫。

其中一些表單計劃有一個文檔文件上傳。

有沒有辦法處理正常值提交和使用AJAX提交文件？

讓我給你一個表單的例子：

<form action="SOMEPATH/LOGIC_FILE.php" action="POST" enctype= multipart/form-data> 
    <label for="name"> 
    <input type="text" id="name" name="name" /> 
    </label> 
    <label for="somethingElse"> 
    <input type="text" id="somethingElse" name="somethingElse" /> 
    </label> 
    <label for="fileUpload"> 
    <input type="file" /> 
    </label> 
</form> 

AJAX例如：

var name = $('#name').val(); 
var somethingElse = $('#somethingElse').val(); 

var dataArr = { 'name':name, 'somethingElse':somethingElse}; 
MYELEMENT.click(function(e){ 
e.preventEventDefault(); 
$.ajax({ 
      url: "PATH/logic/logic_update_client_allg.php", 
      type: "POST", 
      data: allgArray, 
      success: function(dataArr){ 
       // works 
      }, 
      error: function(){ 
       // doesnt work 
      } 
     }); 
} 

這就是我如何處理我的輸入值提交

我如何可以繼續還上載文件用這種形式

謝謝

Answer 1

對於需要使用xmlHttpRequest這是在jQuery.ajax()方法已經提供AJAX上傳發送文件，但使用的FormData。

如果您不針對IE 7,8舊版本，可以使用FormData。有一點需要注意，您必須將contentType, processData設置爲false。

請參見下面的例子：

var name = $('#name').val(); 
var somethingElse = $('#somethingElse').val(); 
var fd = new FormData(); 
var dataArr = { 
    name: name, 
    somethingElse: somethingElse, 
    file : fd.append('file', $('#fileUpload').get(0).files[0]) // put the file here 
}; 

MYELEMENT.click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: "PATH/logic/logic_update_client_allg.php", 
    type: "POST", 
    data: dataArr, //<----post here the files and other values 
    processData: false, // tell jQuery not to process the data 
    contentType: false // tell jQuery not to set contentType 
    success: function(dataArr) { 
     // works 
    }, 
    error: function() { 
     // doesnt work 
    } 
    }); 
}); 

Answer 2

使用jQuery malsup形式的插件使用AJAX

https://github.com/malsup/form