dojo 是否可以将文件输入替换为Blob?

sq1bmfud  于 2022-12-08  发布在  Dojo
关注(0)|答案(2)|浏览(129)

我正在使用一个在线应用程序,我无法访问它的源代码,但我可以通过iframe在它上面注入javascript,因为我可以在同一个域中创建页面。
这个应用程序有一个表单,它提交文件上传和文件输入,认为:

<form>
   <!-- lots and lots of inputs -->
   <input type="file" name="blah">
</form>

我想用这个表单来提交这个文件的javascript Blob而不是磁盘上的文件,同时不影响表单的其他部分。我该怎么做呢?

wqlqzqxt

wqlqzqxt1#

可以将文件输入值替换为blob。
要做到这一点,你必须从它构造File对象,如下所示:

let file = new File([blob], "filename.ext",{type:"mime/type", lastModified:new Date().getTime()});

然后创建DataTransfer对象并将此文件添加到其中。

let container = new DataTransfer();
 container.items.add(file);

这将填充DataTransfer的文件列表,可将其分配给文件输入的文件属性。

fileInputElement.files = container.files;

正如在fiddle中所看到的,它被正确地分配了。另外,我测试了上传(使用enctype=“multipart/form-data”的表单输入),文件被正确地传递到服务器。

cvxl0en2

cvxl0en22#

通过XMLHttpRequest和FormData的新属性,这是可能的
感谢@musa的评论;- )
请考虑以下(未测试)示例:

function sendFile() {
  var content = "<hello>world</hello>"; // set here the content of your file
  var blob = new Blob([content], { type: "text/xml"}); // set the type of content (eg: image/jpeg)

  var formData = new FormData();
  formData.append('blah', blob);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) {
    alert ('successfully (or not) sent');
  };

  xhr.send(formData);
}

更多信息:

注意事项:FormData is not supported by IE9 (and less)
这与Blob相同

相关问题