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多文件上传输入元素的功能，但是对于女巫我会听一下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

我知道你已经有多年前的答案了:)但这是一个2017年的解决方案，主要是为了像我这样的人寻找一个漂亮的解决方案：您可以使用文件输入，它可以在现代浏览器上工作，对于IE，您将不得不使用后备。

如果您还想要文件的名称，并且只使用一点点发烧友的UI就可以使用我的示例;

此代码可以应用于任何表单，并使其完全相同。

https://jsfiddle.net/artipixel/zkrfcbLd/

＆＃13;

var globalFunctions = {};

globalFunctions.ddInput = function(elem) {
  if ($(elem).length == 0 || typeof FileReader === "undefined") return;
  var $fileupload = $('input[type="file"]');
  var noitems = '<li class="no-items"><span class="blue-text underline">Browse</span> or drop here</li>';
  var hasitems = '<div class="browse hasitems">Other files to upload? <span class="blue-text underline">Browse</span> or drop here</div>';
  var file_list = '<ul class="file-list"></ul>';
  var rmv = '<div class="remove"><i class="icon-close icons">x</i></div>'

  $fileupload.each(function() {
    var self = this;
    var $dropfield = $('<div class="drop-field"><div class="drop-area"></div></div>');
    $(self).after($dropfield).appendTo($dropfield.find('.drop-area'));
    var $file_list = $(file_list).appendTo($dropfield);
    $dropfield.append(hasitems);
    $dropfield.append(rmv);
    $(noitems).appendTo($file_list);
    var isDropped = false;
    $(self).on("change", function(evt) {
      if ($(self).val() == "") {
        $file_list.find('li').remove();
        $file_list.append(noitems);
      } else {
        if (!isDropped) {
          $dropfield.removeClass('hover');
          $dropfield.addClass('loaded');
          var files = $(self).prop("files");
          traverseFiles(files);
        }
      }
    });

    $dropfield.on("dragleave", function(evt) {
      $dropfield.removeClass('hover');
      evt.stopPropagation();
    });

    $dropfield.on('click', function(evt) {
      $(self).val('');
      $file_list.find('li').remove();
      $file_list.append(noitems);
      $dropfield.removeClass('hover').removeClass('loaded');
    });

    $dropfield.on("dragenter", function(evt) {
      $dropfield.addClass('hover');
      evt.stopPropagation();
    });

    $dropfield.on("drop", function(evt) {
      isDropped = true;
      $dropfield.removeClass('hover');
      $dropfield.addClass('loaded');
      var files = evt.originalEvent.dataTransfer.files;
      traverseFiles(files);
      isDropped = false;
    });


    function appendFile(file) {
      console.log(file);
      $file_list.append('<li>' + file.name + '</li>');
    }

    function traverseFiles(files) {
      if ($dropfield.hasClass('loaded')) {
        $file_list.find('li').remove();
      }
      if (typeof files !== "undefined") {
        for (var i = 0, l = files.length; i < l; i++) {
          appendFile(files[i]);
        }
      } else {
        alert("No support for the File API in this web browser");
      }
    }

  });
};

$(document).ready(function() {
  globalFunctions.ddInput('input[type="file"]');
});

＆＃13;

.blue-text {
  color: blue;
}

.underline {
  text-decoration: underline;
}

.drop-field {
  position: relative;
  text-align: center;
  vertical-align: middle;
}

.drop-field,
.drop-area {
  height: 150px;
  width: 300px;
}

.drop-field .browse {
  z-index: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
}

.drop-field .drop-area {
  display: block;
  border: 1px dashed gray;
  position: relative;
}

.drop-field,
.drop-area,
.drop-field .browse {
  transition: all 0.3s;
}

.drop-field.loaded .drop-area {
  border: 1px solid blue;
}

.drop-field .browse {
  opacity: 0;
  transform: translateY(100%);
}

.drop-field.loaded .browse {
  opacity: 1;
  transform: translateY(0);
}

.drop-field.hover .drop-area {
  border: 1px solid black;
}

.drop-field .drop-area input[type="file"] {
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  z-index: 3;
  top: 0;
  left: 0;
  opacity: 0.000001;
}

.drop-field .file-list {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  text-align: center;
}

.drop-field .remove {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 4;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(-100%);
  cursor: pointer;
}

.drop-field .remove:hover {
  color: blue;
}

.drop-field.loaded .remove {
  opacity: 1;
  transform: translateY(0);
}

.drop-field ul li {
  padding: 0;
  text-align: center;
  list-style: none;
}


}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple>

＆＃13;

Answer 2

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

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

这样可行。

拖放文件上传div，就像输入类型=“文件”一样工作

2 个答案: