将CURL文件上载转换为jQuery Ajax POST_Jquery_Ajax_Curl

将CURL文件上载转换为jQuery Ajax POST

jquery ajax curl

将CURL文件上载转换为jQuery Ajax POST,jquery,ajax,curl,Jquery,Ajax,Curl,我使用这个curl请求通过REST端点上传一个文件，它工作正常 curl -X POST "http://localhost:8080/api/v1/uploads" -H "accept: application/json" -H "folderId: 123" -H "uploadDescription: testing" -H "public: protected" -H "Authorization: Bearer abcd1234xyz" -H "Content-Type: multi

我使用这个

curl

请求通过

REST

端点上传一个文件，它工作正常

curl -X POST "http://localhost:8080/api/v1/uploads" -H "accept: application/json" -H "folderId: 123" -H "uploadDescription: testing" -H "public: protected" -H "Authorization: Bearer abcd1234xyz" -H "Content-Type: multipart/form-data" -F "fileInput=@/home/username/Desktop/something.jar"

我希望通过提供GUI，使用jQuery Ajax执行相同的文件上传操作

我的HTML文件：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

    <h1>Multiple file upload example - AJAX</h1>

    <form method="POST" enctype="multipart/form-data" id="fileUploadForm">
        <input type="file" name="files" multiple="multiple"
            required="required" /><br /> <br /> <input type="submit"
            value="Submit" id="btnSubmit" />
    </form>

    <h1>Ajax Post Result</h1>
    <pre>
        <span id="result"></span>
    </pre>
    <script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

从示例curl命令中，当

-F“fileInput=@/home/username/Desktop/something.jar”

正确时，如何修改HTML，如下所示

发件人：

致：

```
name=“files”
```
已修改为
```
name=“fileInput”
```
- 在当前脚本中，文件作为
```
files:content
```
  上传。我想这可能是你问题的原因。通过以上修改，文件上传为
```
fileInput:content
```

如果我误解了你的问题，而这不是你问题的直接解决办法，我道歉

$(document).ready(function() {
    $("#btnSubmit").click(function(event) {
        event.preventDefault();
        fire_ajax_submit();
    });
});

function fire_ajax_submit() {
    var form = $('#fileUploadForm')[0];
    var data = new FormData(form);
    $("#btnSubmit").prop("disabled", true);

    $.ajax({
                type : "POST",
                enctype : 'multipart/form-data',
                url : "http://localhost:8080/api/v1/uploads",
                headers : {
                    'folderId' : '123',
                    'uploadDescription' : 'testing',
                    'public' : 'protected'
                },
                beforeSend : function(xhr) {
                    xhr.setRequestHeader(
                                    "Authorization",
                                    "Bearer abcd1234xyz");
                },
                data : data,
                processData : false,
                contentType : false,
                cache : false,
                timeout : 600000,
                success : function(data) {
                    $("#result").text(data);
                    console.log("SUCCESS : ", data);
                    $("#btnSubmit").prop("disabled", false);
                },
                error : function(e) {
                    $("#result").text(e.responseText);
                    console.log("ERROR : ", e);
                    $("#btnSubmit").prop("disabled", false);

                }
            });
}

<input type="file" name="files" multiple="multiple"
    required="required" /><br /> <br /> <input type="submit"
    value="Submit" id="btnSubmit" />

<input type="file" name="fileInput" multiple="multiple"
    required="required" /><br /> <br /> <input type="submit"
    value="Submit" id="btnSubmit" />