使用AJAX的文本内容和FileUpload

我正在为我的公司编写客户端数据库系统。 没有多少花哨的东西，但它做到了它应该做的事情。 现在所有基本的“文本”内容都已完成，我想在其中添加一些文件管理。

我有几种forms可以使用ajax发送到后端，然后写入模型中的db。

其中一些表单计划上传文档文件。

有没有办法处理正常值提交和使用AJAX提交文件？

我来给你一个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 } }); } 

多数民众赞成我如何处理我的INPUT VALUE提交

如何继续使用此表单上传文件

谢谢

Answer 1

对于ajax上传，您需要使用jQuery.ajax()方法中已有的xmlHttpRequest ，但使用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