如何使用 jQuery 或其他 js 框架将字符串作为文件上传

Posted 2023-02-24

【中文标题】如何使用 jQuery 或其他 js 框架将字符串作为文件上传

【英文标题】：How to upload string as file with jQuery or other js framework

【发布时间】：2011-03-02 01:14:54

【问题描述】：

使用 javascript，我有一个字符串文件（通过 ajax 请求获得）。

如何通过另一个 ajax 请求将其作为文件上传到服务器？

【问题讨论】：

请澄清：您是否将文件路径作为字符串或将文件内容作为字符串并希望将其作为文件上传？

@Marko：看起来他的文件内容包含在一个字符串中，这是他从 ajax 请求中获得的。

【参考方案1】：

您需要将 Content-type 请求标头设置为 multipart/form-data 并稍微调整一下格式，I wrote this in Plain Ol' JavaScript (tm)，但您可以轻松地将其改写为库：

编辑：我现在喝咖啡了，所以针对 jQuery 进行了修改（无库版本 here）：

// Define a boundary, I stole this from IE but you can use any string AFAIK
var boundary = "---------------------------7da24f2e50046";
var body = '--' + boundary + '\r\n'
         // Parameter name is "file" and local filename is "temp.txt"
         + 'Content-Disposition: form-data; name="file";'
         + 'filename="temp.txt"\r\n'
         // Add the file's mime-type
         + 'Content-type: plain/text\r\n\r\n'
         // Add your data:
         + data + '\r\n'
         + '--'+ boundary + '--';

$.ajax(
    contentType: "multipart/form-data; boundary="+boundary,
    data: body,
    type: "POST",
    url: "http://asite.com/apage.php",
    success: function (data, status) 
    
);

【讨论】：

嗯，不错！不知道这在 Ajax 请求中是可能的。

@Pekka：当然可以。如果您无法控制要上传到的服务器，并且它必须接受使用 multipart/form-data 发布的文本文件，这将非常方便。

这行得通，除了两个调整以使用 express/node：1）最后一个边界需要是 + '--'+boundary+ '--';，并且 ajax 调用中的 contentType 需要是："multipart/form-data; boundary="+boundary跨度>

@chovy 这也是 Rails 所需要的。谢谢，你为我节省了几个小时的调试时间

【参考方案2】：

以下是如何在不手动构建多部分请求正文的情况下做到这一点：

var s = 'some string data';
var filename = 'foobar.txt';

var formData = new FormData();
formData.append('file', new File([new Blob([s])], filename));
formData.append('another-form-field', 'some value');

$.ajax(
    url: '/upload',
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function () 
        console.log('ok');
    ,
    error: function () 
        console.log('err'); // replace with proper error handling
    
);

【讨论】：

看起来不错...我可以将 Base64 转码为文件对​​象吗？如果没有，我可以使用 base64 并在服务器上对其进行解码。但我只是好奇

FormData 对象是否跨浏览器兼容？

我正在使用 Dropzone，但这个答案可以将字符串转换为文件以进行上传（“new File([new Blob([s])], filename)”）。

为什么 contentType 是假的？

【参考方案3】：

不使用ajax使用new FormData()的解决方案

str = "Hello!\nI'm text string";
var strblob = new Blob([str], type: 'text/plain');

var formdata = new FormData();
formdata.append("file", strblob, "file.txt");
formdata.append("field-1", "field-1-data");

var requestOptions = 
  method: 'POST',
  body: formdata,
  redirect: 'follow'
;

fetch("http://url", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error))