Javascript 使用ajax发送formdata以进行文件上载

我试图通过使用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>

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

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”的参数。

我认为您必须创建

FormData

，在您可以将文件附加到FormData之后，向输入添加一个ID

使用

---

使用此格式启动ajax。因为文件是多部分的，或者jquery serialize（）方法不能序列化多部分内容，所以我们需要将其手动放置

//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) {
        }
});

---

尝试使用完整url.FYI:

async:false，

主线程中的同步请求已被弃用-避免在后一种情况下未发送名为“files”的参数，在未看到表单的情况下，这是一个真正的Mystery，但请求已发送到uploadimage函数，那么，指定完整的url有什么用处呢@HimanshuUpadhyayoh ok@SrijanSharmathis似乎也不起作用。在工作案例中，这是我用来移动文件的信息：{file:{name:'images.png'，data:，encoding:'7bit'，mimetype:'image/png'，mv:[Function:mv]}}，它出现在req变量本身中。但是，在本例中，我们只获得图像名称等基本信息。抱歉，我编辑了我的答案，答案应该是

formData.append（'file'，$（'uploadFile'）[0]。files[0]）

获取一个文件。但在某些情况下，当你想上传多个文件时，你必须进行循环。感谢man…与之斗争了很长时间…你能简单地解释一下为什么我编写的文件不起作用的逻辑吗？new FormData（此）；//您没有指定哪个formData

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);
});
};

 $("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");
          }
      });

  });

$("#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;
  });

//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) {
        }
});