现在我们可以把文件拖放到一个特殊的容器中,然后用XHR 2上传。一次很多。实时进度条等。非常酷的东西。例子。

但有时候我们并不想要那么酷。我想要的是拖放文件—许多一次—到一个标准的HTML文件输入:<input type=file multiple>。

这可能吗?是否有一些方法来“填充”文件输入与正确的文件名(?)从文件掉落?(出于文件系统安全原因,不能使用完整的文件路径。)

为什么?因为我想提交一份正常的表格。适用于所有浏览器和所有设备。拖放只是为了增强和简化用户体验的渐进式增强。带有标准文件输入(+多个属性)的标准表单将出现在那里。我想增加HTML5的增强功能。

编辑 我知道在某些浏览器中,有时(几乎总是)可以将文件放入文件输入本身。我知道Chrome通常会这样做,但有时它会失败,然后在当前页面加载文件(如果你正在填写表单,这是一个大失败)。我想愚弄&防浏览器。


当前回答

对于没有任何JS的本地解决方案:

<div class="file-area">
    <input type="file">
    <div class="file-dummy">
        <span class="default">Click to select a file, or drag it here</span>
        <span class="success">Great, your file is selected</span>
    </div>
</div>

<style>
    .file-area {
        width: 100%;
        position: relative;
        font-size: 18px;
    }
    .file-area input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }
    .file-area .file-dummy {
        width: 100%;
        padding: 50px 30px;
        border: 2px dashed #ccc;
        background-color: #fff;
        text-align: center;
        transition: background 0.3s ease-in-out;
    }
    .file-area .file-dummy .success {
        display: none;
    }
    .file-area:hover .file-dummy {
        border: 2px dashed #1abc9c;
    }
    .file-area input[type=file]:valid + .file-dummy {
        border-color: #1abc9c;
    }
    .file-area input[type=file]:valid + .file-dummy .success {
        display: inline-block;
    }
    .file-area input[type=file]:valid + .file-dummy .default {
        display: none;
    }
</style>

改编自https://codepen.io/Scribblerockerz/pen/qdWzJw

其他回答

我知道在Chrome中有一些技巧:

当你把文件放到drop zone时,你会得到一个dataTransfer。files对象,这是一个FileList类型的对象,它包含您拖动的所有文件。同时,<input type="file" />元素具有属性文件,即相同的FileList类型对象。

因此,您可以简单地分配dataTransfer。文件对象指向输入。文件属性。

@BjarkeCK做得很棒。我对他的作品做了一些修改,以使用它作为jquery的方法:

$.fn.dropZone = function() {
  var buttonId = "clickHere";
  var mouseOverClass = "mouse-over";

  var dropZone = this[0];
  var $dropZone = $(dropZone);
  var ooleft = $dropZone.offset().left;
  var ooright = $dropZone.outerWidth() + ooleft;
  var ootop = $dropZone.offset().top;
  var oobottom = $dropZone.outerHeight() + ootop;
  var inputFile = $dropZone.find("input[type='file']");
  dropZone.addEventListener("dragleave", function() {
    this.classList.remove(mouseOverClass);
  });
  dropZone.addEventListener("dragover", function(e) {
    console.dir(e);
    e.preventDefault();
    e.stopPropagation();
    this.classList.add(mouseOverClass);
    var x = e.pageX;
    var y = e.pageY;

    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
      inputFile.offset({
        top: y - 15,
        left: x - 100
      });
    } else {
      inputFile.offset({
        top: -400,
        left: -400
      });
    }

  }, true);
  dropZone.addEventListener("drop", function(e) {
    this.classList.remove(mouseOverClass);
  }, true);
}

$('#drop-zone').dropZone();

工作小提琴

您可以做的是显示一个文件输入,并用透明的下拉区域覆盖它,注意使用像文件[1]这样的名称。{确保在FORM标签中有enctype="multipart/ FORM -data"}

然后让下拉区域通过动态地为文件2创建更多的文件输入来处理额外的文件。Number_of_files,请确保使用相同的基名,适当地填充value-属性。

最后(前端)提交表单。


处理这个方法所需要做的就是修改过程来处理一个文件数组。

理论上,您可以添加一个覆盖<input/>的元素,然后使用它的drop事件来捕获文件(使用File API)并将它们传递给输入文件数组。

除了文件输入是只读的。这是一个老问题。

然而,你可以完全绕过表单控件,通过XHR上传(不确定是否支持):

https://developer.mozilla.org/en/Using_files_from_web_applications http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob

你也可以在周围区域使用一个元素来取消Chrome中的删除事件,并防止默认的加载文件行为。

在Safari和Firefox中已经可以在输入中删除多个文件。

这是“DTHML”HTML5的实现方式。标准表单输入(正如Ricardo Tomasi指出的那样,只能读取)。然后,如果拖入一个文件,它就会附加到表单上。这将需要修改操作页面,以接受以这种方式上传的文件。

function readfiles(files) { for (var i = 0; i < files.length; i++) { document.getElementById('fileDragName').value = files[i].name document.getElementById('fileDragSize').value = files[i].size document.getElementById('fileDragType').value = files[i].type reader = new FileReader(); reader.onload = function(event) { document.getElementById('fileDragData').value = event.target.result;} reader.readAsDataURL(files[i]); } } var holder = document.getElementById('holder'); holder.ondragover = function () { this.className = 'hover'; return false; }; holder.ondragend = function () { this.className = ''; return false; }; holder.ondrop = function (e) { this.className = ''; e.preventDefault(); readfiles(e.dataTransfer.files); } #holder.hover { border: 10px dashed #0c0 !important; } <form method="post" action="http://example.com/"> <input type="file"><input id="fileDragName"><input id="fileDragSize"><input id="fileDragType"><input id="fileDragData"> <div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc"></div> </form>

如果你能把整个窗口变成一个拖放区,那就更boss了,看看我如何检测进入和离开窗口的HTML5拖放事件,就像Gmail一样?