使用 jQuery AJAX 上传非 pdf 文件会导致问题答案

【问题标题】：Uploading a non-pdf file using jQuery AJAX causes issues使用 jQuery AJAX 上传非 pdf 文件会导致问题
【发布时间】：2019-10-09 18:33:48
【问题描述】：

我的任务是创建一个 html 文件上传器，它必须向我们的 ORDS 端点创建一个 POST 请求。

我想出了一个适用于 PDF 文件的解决方案，但是当我尝试上传其他任何内容时，问题开始出现。

这是我的代码：

$('#login-form').submit(function(e) {
    e.preventDefault();
    if (document.getElementById("fileinput").value != "") {
        AJAXSendRequest();
    } else {
        document.getElementById("alertfile").style.display = "block";
    }
    return false;
});

function AJAXSendRequest() {
    var formData = new FormData();
    formData.append("file", document.getElementById("fileinput").files[0]);
    var settings = {
        "async": true,
        data: formData,
        processData: false,
        contentType: document.getElementById("fileinput").files[0].type,
        "crossDomain": true,
        "url": "http://192.168.0.145:7001/ords/dads/media_module/media/",
        "method": "POST",
        "headers": {
            "Content-Type": document.getElementById("fileinput").files[0].type,
            "filename": document.getElementById("fileinput").files[0].name,
            "inWHAT_DOC": tipo,
            "inID_DOC_INSIDE": document.getElementById("id").value.toString()
        }
    }
    $.ajax(settings).done(function(response) {
        document.getElementById("successfile").style.display = "block";
        // window.close();
    });
}

无论我上传什么样的文件，我都会得到一个 HTTP201，但这是读取上传的 xml 文件的结果

-----------------------------19718198955447
Content-Disposition: form-data; name="file"; filename="AutoResponder.xml"
Content-Type: text/xml

<?xml version="1.0" encoding="utf-8"?>
<AutoResponder LastSave="2019-04-01T11:26:51.2600418+02:00" FiddlerVersion="5.0.20182.28034">
  <State Enabled="false" Fallthrough="false" UseLatency="false" />
</AutoResponder>
-----------------------------19718198955447--

formData 以某种方式包装在这个奇怪的字符串中，该字符串也显示在上传的文件中（但不是 pdf）（数字随每个请求而变化）并且这两个标头始终添加文件的顶部。

Content-Disposition: form-data; name="file"; filename="AutoResponder.xml"
Content-Type: text/xml

我做错了什么吗？提前致谢

编辑：使用 curl 完成的请求没有问题。

curl -X POST http://192.168.0.145:7001/ords/dads/media_module/media/ -H 'Content-Type: image/jpeg' -H 'Host: 192.168.0.145:7001' -H 'filename: testimgcurl.jpg' -H 'inID_DOC_INSIDE: 1240187' -H 'inWHAT_DOC: C Contratti Appalto' --data-binary @ch4.jpg

【问题讨论】：

这似乎是一个服务器端问题，当文件不是 PDF mime 类型时如何处理您的请求。您的 JS 很好，并且与服务器返回的响应类型没有任何关系（假设请求是正确的）。也就是说，我建议你设置contentType: false。
还要注意请求中的'weird string'是请求中属性之间的边界；这是完全正常的。
用附加信息编辑了问题
字符串的问题是它也出现在上传的文件中。

标签： javascript jquery ajax oracle http

【解决方案1】：

经过更多的实验，我最终使用了 XMLHttpRequest。

这是工作代码。

var file = document.getElementById("fileinput").files[0];
var data = new Blob([file], {type: file.type});
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        console.log(this.responseText);
    }
});
xhr.open("POST", "http://192.168.0.145:7001/ords/dads/media_module/media/");
xhr.setRequestHeader("Content-Type", file.type);
xhr.setRequestHeader("Host", "192.168.0.145:7001");
xhr.setRequestHeader("filename", file.name);
xhr.setRequestHeader("inWHAT_DOC", tipo);
xhr.setRequestHeader("inID_DOC_INSIDE", id);
xhr.setRequestHeader("cache-control", "no-cache");
xhr.send(data);

【讨论】：