如何从拖放中POST文件(从文件API)
How to POST a file (from File API) from drag and drop
我有一个文件上传页面,通过拖放选择文件。由于该文件是插入的(而不是使用传统的字段),因此我通过javascript文件API向我公开了该文件。
我一直在阅读Mozilla的这篇文章,但我对异步上传它不太感兴趣(因为我有一些其他数据需要与文件一起提交,但我找到的所有资源都是用XHR来完成的。
以下是我设法拼凑出来的:
function handleFileSelect(evt) {
evt.toElement.className = "";
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, file; file = files[i]; i++) {
var f = file;
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result;
// bin is the binaryString
};
reader.readAsBinaryString(file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "{% url micro-upload %}");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(bin);
output.push('<li><strong>Uploaded:</strong><em>', escape(f.name), '</em> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
然而,在服务器端,Django并不喜欢这样。它抱怨POST数据格式错误。
理想情况下,我认为我的解决方案是:
- 用户将文件拖放到页面上
- 文件添加到隐藏文件
<input>
- 文件将与表单数据的其余部分一起张贴
我知道大多数浏览器都允许您将文件拖到文件<input>
上,但我希望有一个更大的自定义样式的拖放目标。
xhr.sendAsBinary()
不是标准配置。你想过使用FormData
吗?这将允许您将文件(和其他属性)附加到mime多部分请求。。。本质上就是form.post()的作用。请在此处查看我的响应,了解如何执行此操作的代码。
相关文章:
- 找不到Intel XDK cordova文件api 1.3.3文件
- 如何在IE8中启用JavaScript文件API
- 文件API中的Javascript变量范围
- 我可以使用 HTML5 文件 API 预览 PDF 吗?
- 在NW.js应用程序中为HTML5文件API设置配额
- html5文件api,将用户选择的目录存储在sessionStorage中
- HTML5文件API使用Ajax上传多个图像
- Javascript;HTML文件API-基于文件对象的javascript对象是否仍然包含文件'的位置
- 文件选择/文件API-将文件发送到嵌入式PDFObject
- 使用 HTML 文件 API 和 JavaScript 搜索本地目录
- 如何使用 phonegap 文件 API 在该目录中创建目录和文件
- 使用 Phonegap 文件 API 获取所有文件名
- Cordova 的文件 API 中的元数据
- 如何从特权代码使用 Dom 文件 API
- 有没有办法将文件附加到已经存在的文件列表中?JavaScript 文件 API
- JavaScript 文件 API 具有多个输入
- 兴访问用户配置文件 API
- 使用 HTML5 文件 API 在浏览器中创建音频列表
- 如何从html 5文件API获取图像宽度
- 如何通过文件 API 从 json 文件执行数据