使用ajax发送formdata进行文件上传答案

【问题标题】：Sending formdata for file upload using ajax使用ajax发送formdata进行文件上传
【发布时间】：2018-03-18 02:43:33
【问题描述】：

我正在尝试通过使用带有 ajax 的表单数据来上传图像。虽然下面的行似乎工作正常并将图像保存在我的本地机器上。

<form ref='uploadForm' id='uploadForm' action='/tab10/uploadImage' method='post' encType="multipart/form-data">
<input type="file" class="btn btn-default" name="file" />
<input type='submit' class="btn btn-default" value='Broadcast Image' />
</form>

但是，当我没有将操作指定为表单属性时，我尝试使用 ajax 进行调用，事情似乎并不正常。下面是我用来使用 ajax 进行 post API 调用的代码。

HTML

<form ref='uploadForm' id='uploadForm' encType="multipart/form-data">

jQuery

$("form#uploadForm").submit(function (event) {
          //disable the default form submission
          event.preventDefault();
          var formData = $(this).serialize();
          console.log(formData);
          $.ajax({
              url: '/tab10/uploadImage',
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function () {
                  alert('Form Submitted!');
              },
              error: function(){
                  alert("error in ajax form submission");
              }
          });
          return false;
      });

下面是我用来保存图像的代码。

exports.uploadImage = function(req, resp) {
var res = {};
let file = req.files.file;
file.mv('./images/image', function(err) {
if (err) {
  res.status = 500;
  res.message = err;
  // return res.status(500).send(err);
  return resp.send(res);
}
res.status = 200;
res.message = 'File uploaded!';
return resp.send(res);
});
};

当我在uploadimage函数中检查请求数据时，似乎在请求中，在后一种情况下没有发送名为“files”的参数。

【问题讨论】：

尝试使用完整的网址。
仅供参考：async: false, 主线程中的同步请求已被弃用 - 避免它
parameter called "files" is not being send in the later case 不看表格，真是个谜
但是请求被发送到uploadimage函数，那么如何指定完整的url会有任何用处。 @HimanshuUpadhyay
哦好的@SrijanSharma

标签： javascript jquery node.js ajax image-uploading

【解决方案1】：

我认为你必须创建FormData，在你可以将文件附加到formData之后，添加一个ID到输入<input type="file" class="btn btn-default" name="file" id="uploadFile"/>

 $("form#uploadForm").submit(function (event) {
      //disable the default form submission
      event.preventDefault();
      var formData = new FormData();
      formData.append('file',$('#uploadFile')[0].files[0]);
      $.ajax({
          url: '/tab10/uploadImage',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function () {
              alert('Form Submitted!');
          },
          error: function(){
              alert("error in ajax form submission");
          }
      });

  });

【讨论】：

这似乎也不起作用。在工作情况下，这是我用于移动文件的信息：{ 文件：{ 名称：'images.png'，数据：，编码：'7bit'，mimetype：'image/png'， mv: [Function: mv] } } 它出现在 req 变量本身中。但是在这种情况下，我们只获得了图像名称等基本信息。
对不起，我编辑了我的答案，它应该是formData.append('file',$('#uploadFile')[0].files[0]); 来获取一个文件。但是在某些情况下，当你想上传多个文件时，你必须循环

【解决方案2】：

使用

$("#uploadForm").submit(function () {
      var formData = new FormData(this);
      $.ajax({
          url: '/tab10/uploadImage',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function () {
              alert('Form Submitted!');
          },
          error: function(){
              alert("error in ajax form submission");
          }
      });
      return false;
  });

【讨论】：

谢谢大佬...苦苦挣扎了很长时间...您能简要解释一下为什么我写的那个不起作用的逻辑吗？
新 FormData(this); // 你没有指定哪个 formData

【解决方案3】：

使用这种格式来触发ajax。因为文件是multipart或者jquery serialize()方法不能序列化multipart的内容，所以我们需要手动放置。

//get choosen file
var fileContent = new FormData();
fileContent.append("file",$('input[type=file]')[0].files[0]);
$.ajax({
     type: "POST",
      enctype:"multipart/form-data",
       url: "/tab10/uploadImage",
       data: fileContent,
       processData: false,
       contentType: false,
       success: function(response) {
        }
});

【讨论】：