Question

所以我有一个文件对象，我是从桌面拖放得到的。我正在尝试填充隐藏文件输入，我可以使用它来执行提交。我怎么能这样做？

谢谢！

Answer 1

有两种方法。您不一定需要隐藏文件输入。

使用xhr.send(file)：http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob
使用xhr.send(formData)：http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata

实际上使用隐藏的<input type="file">：

<style>
#files {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.0;
  z-index: 2;
}
[type='submit']{
  display: none;
}
#drop {
  position: relative;
  margin: auto;
  width: 500px;
  height: 300px;
}
</style>

<form action="/upload" method="POST" enctype="multipart/form-data"> 
  <div id="drop"> 
    <div>Drop files here</div> 
    <input id="files" type="file" name="file" multiple> 
  </div> 
  <input type="submit"> 
</form> 

<script>
document.querySelector("#files").addEventListener("change", function(e) {
  document.querySelector("[type='submit']").click();
}, false);
</script>

最后一个的关键是文件输入上的opacity: 0;height: 100%;width: 100%。

Answer 2

发现这个：

（文件API）使用 FileReader.readAsDataURL(file) 调用，每次完全读取文件时，都会创建一个新的“数据URL”（RFC 2397）格式化对象，并包含一个事件被触发到FileReader对象上的onloadend处理程序。

（仅供参考：“数据URL”对象是Base64编码的二进制数据，具有规范定义的字符标题序列。浏览器理解它们。）

（文件API）现在我们已经从事件中获得了“数据URL”对象，我们可以用它来做很酷的事情，例如替换标签的src属性以立即在屏幕上显示值或上传Base64编码的数据部分到服务器处理为二进制数据。

<强> Source

如何将文件对象转换为填充的文件输入，以便我可以通过表单提交？

2 个答案: