如何使用jQuery上传变量内的文件内容？

How to send 'data' which is the file content with ajax ? How do I setup the name of that file ?

如何使用ajax发送'data'作为文件内容？如何设置该文件的名称？

I'm looking to do it without the DOM "form/input"

我想在没有DOM“表单/输入”的情况下这样做

<script>

var file_to_upload = "hi I'm the content of a file";

$.ajax({
    url: 'php/upload.php',
    data: file_to_upload,
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

<script>

1 个解决方案

#1

I don't think jQuery has built-in support for posting files via ajax. fetch does though (and is built into modern browsers), because body can be a Blob or a BufferSource (ArrayBuffer or typed array).

我不认为jQuery内置支持通过ajax发布文件。 fetch虽然（并且内置于现代浏览器中），因为body可以是Blob或BufferSource（ArrayBuffer或类型化数组）。

You can either send the blob or buffer as the body of the request, or if you want to send it as a named parameter in a multipart form upload, you can create a FormData instance and use a Blob as the value when calling append. Something like:

您可以将blob或缓冲区作为请求的主体发送，或者如果要在多部分表单上载中将其作为命名参数发送，则可以创建FormData实例并在调用append时使用Blob作为值。就像是：

// This is off the top of my head, not meant to be a perfect,
// all-singing, all-dancing example. You'll need to read the
// linked documentation and adjust as necessary.
var blob = new Blob([/*...file data...*/], {type: "appropriate/mimetype"});
var data = new FormData();
data.append("parameterName", blob);
fetch("php/upload.php", {
    method: "POST",
    body: data
})
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.text(); // or perhaps response.json()
})
.then(result => {
    // ...use the response
})
.catch(error => {
    // ...handle/report the error
});

/*...file data...*/ can be a typed array, an ArrayBuffer, etc.; see the Blob constructor for details.

/*...file data ... * /可以是类型化数组，ArrayBuffer等;有关详细信息，请参阅Blob构造函数。

Or if this is within an async function:

或者如果这是在异步函数中：

try {
    let blob = new Blob([/*...file data...*/], {type: "appropriate/mimetype"});
    let form = new FormData();
    data.append("parameterName", blob);
    let response = await fetch("php/upload.php", {
        method: "POST",
        body: data
    });
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    let result = await response.text(); // or perhaps response.json()
    })
    // ...use the response
} catch(error) {
    // ...handle/report the error
}

#1