javascript - 如何使用jquery ajax请求将图像文件从本地机器发送到服务器

Question

我有一个输入类型为文件的 html 表单，我有一个 API 链接，用于将图像存储到云端。在此功能中，用户可以从他的本地计算机上传文件并将其上传到服务器。服务器返回上传图片的云端url。在 postman 中它工作正常，但是当与 jquery 一起使用时我无法弄清楚如何完成这个。在 postman 中有几个参数集，如文件名、标签和员工 ID。在文件名字段中有选择文件按钮和表单数据单选按钮被选中。

到目前为止，这是我的 jquery 代码

$("#test-btn").on("click", function() {
$.ajax({
  url: 'myURL/external/upload',
  type: 'POST',
  headers: {
    "appID": "some value",
    "version": "some value",
    "empID": "some value",
    "contentType": "application/x-www-form-urlencoded"
  },
  data: new FormData($("#test-form")),
  processData: false,
  contentType: false,
  success: function() {
    console.log(data)
  },
  error: function(e) {
    console.log(e)
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" name="upload-image" id="test-form">
  <input type="file" name="filename" />
  <input type="text" name="tag" value="some value" />
  <input type="text" name="empID" value="some value" />
</form>
<button id="test-btn">make</button>

我已将 secret 字段替换为虚拟值。

Answer 1

$("form#test-form").submit(function(){

    var formData = new FormData(this);

    $.ajax({
        url : 'myURL/external/upload',
        type : 'POST',
        data: formData,
        async: false,
        // your other config, params
        success : function(){console.log(data)},
        error : function(e){console.log(e)}
    });

    return false;
});

或者你可以试试:

<form enctype="multipart/form-data" method="post" name="upload-image" id="test-form" action="myURL/external/upload">
  <input type="file" name="filename" />
  <input type="text" name="tag" value="some value" />
  <input type="text" name="empID" value="some value" />
</form>
<button id="test-btn">make</button>

$("form#test-form").submit(function() {
    var formData = new FormData($(this)[0]);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});