如何使用jquery ajax请求将映像文件从本地计算机发送到服务器

Question

我有一个输入type = file的html表单，我有一个API链接，用于将图像存储到云端。 在此功能中，用户可以从本地计算机上载文件并将其上载到服务器。 服务器返回上传图像的云URL。 在postman中，它工作正常，但在使用jquery时，我无法弄清楚如何实现这一点。 邮递员有几个参数设置，如文件名，标签和employeeID。 在文件名字段中，选择文件按钮，并选中表格数据单选按钮。

到目前为止，这是我的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> 

我用虚拟值替换了机密字段。

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