拖放文件上传div,就像输入类型="文件"一样工作

Question

我试图通过拖放实现本机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;

此外,我知道有插件,但我想做本机.

Answer 1

  <input name="filesInput" type="file" multiple  onchange="fileUpload(event)"/>
  <div class="drop" ondrop="fileUpload(event)" >
      <p>Drop files here</p>
  </div>

    function fileUpload(e){
       var files=e.target.files||e.dataTransfer.files;
       for(var i=0;i<files.length;i++)
        {
        //upload files
        }
    }

这会起作用。