我试图通过拖放实现本机HTML5多个文件上传 . 我一直在关注http://onehub.com/blog/posts/designing-an-html5-drag-drop-file-uploader-using-sinatra-and-jquery-part-1/和http://www.html5rocks.com/en/tutorials/file/dndfiles/等教程,但我还没有找到我需要的解决方案 .
基本上我想模拟一个HTML5多文件上传输入元素的功能,但有一个div女巫我听的是drop事件 .
换句话说,我想制作一个这样的表格:
<form method="post" action="somesscript.php" enctype="multipart/form-data">
<input type="text" />
<div class="drop">
<p>Drop files here</p>
</div>
<input type="submit" />
</form>
像这样的工作是这样的:
<form method="post" action="somesscript.php" enctype="multipart/form-data">
<input type="text" />
<input name="filesToUpload[]" type="file" multiple />
<input type="submit" />
</form>
拖放字段应该被视为表单的一部分,并且在提交表单时,我只想要来自输入的所有数据以及来自拖放字段的文件数组通过AJAX发送到服务器 .
到目前为止,我只在drop事件中实现了文件名的读取 . 我希望删除的所有文件都被添加到一个数组中,但我不知道如何访问文件本身,而不是它们的属性,所以后者我可以通过AJAX将表单上的文件数组一起发送给其余的表格数据 .
我想要的东西:
var data = e.originalEvent.dataTransfer,
files = data.files,
filesArray = [],
filesLength = files.length,
i;
for ( i = 0; i < filesLength; i++ ) {
var file = files[i];
filesArray.push(file);
}
return filesArray;
此外,我知道有插件,但我想做本机 .
2 回答
我知道你已经有了几年前的答案:)但这里是一个2017年的解决方案,主要是像我这样的人寻找一个漂亮的解决方案:你可以用文件输入,它将在现代浏览器上工作,对于IE你会必须使用后备 .
如果你还想要文件的名称,并且只使用一点点发烧友的UI就可以使用我的例子;
此代码可以应用于任何表单,并使其完全相同 .
https://jsfiddle.net/artipixel/zkrfcbLd/
这会奏效 .