带有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