Question

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

我有几种形式可以使用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
            }
        });
}

这就是我如何处理我的INPUT VALUE提交

如何继续上传包含此表单的文件

谢谢

Answer 1

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

使用AJAX

2 个答案: