拖放文件到标准HTML文件输入

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

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

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

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

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

当前回答

对于那些想在2018年这样做的人来说，我有一个比这里发布的所有旧东西更好更简单的解决方案。你可以用普通的HTML, JavaScript和CSS做一个漂亮的拖放框。

(目前只适用于Chrome)

让我们从HTML开始。

<div>
<input type="file" name="file" id="file" class="file">
<span id="value"></span>
</div>

然后我们来做造型。

    .file {
        width: 400px;
        height: 50px;
        background: #171717;
        padding: 4px;
        border: 1px dashed #333;
        position: relative;
        cursor: pointer;
    }

    .file::before {
        content: '';
        position: absolute;
        background: #171717;
        font-size: 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }

    .file::after {
        content: 'Drag & Drop';
        position: absolute;
        color: #808080;
        font-size: 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

在你完成这些之后，它看起来已经很好了。但我想你们想看看上传的是什么文件，因此我们将使用JavaScript。还记得pfp-value跨度吗?这就是我们打印文件名的地方。

let file = document.getElementById('file');
file.addEventListener('change', function() {
    if(file && file.value) {
        let val = file.files[0].name;
        document.getElementById('value').innerHTML = "Selected" + val;
    }
});

就是这样。

2018-07-04 14:39:06

其他回答

这是对William Entriken给出的例子的改进、修正和修改。有一些问题。例如，<input type="file" />的正常按钮没有做任何事情(以防用户想要以这种方式上传文件)。

注意:我正在制作一个只有我自己使用的web应用程序，所以这只针对Firefox进行了测试(和改进)。我确信，即使您开发跨浏览器的情况下，这些代码也是有价值的。

2020-08-03 18:19:12

//----------App.js---------------------// $(document).ready(function() { var holder = document.getElementById('holder'); holder.ondragover = function () { this.className = 'hover'; return false; }; holder.ondrop = function (e) { this.className = 'hidden'; e.preventDefault(); var file = e.dataTransfer.files[0]; var reader = new FileReader(); reader.onload = function (event) { document.getElementById('image_droped').className='visible' $('#image_droped').attr('src', event.target.result); } reader.readAsDataURL(file); }; }); .holder_default { width:500px; height:150px; border: 3px dashed #ccc; } #holder.hover { width:400px; height:150px; border: 3px dashed #0c0 !important; } .hidden { visibility: hidden; } .visible { visibility: visible; } <!DOCTYPE html> <html> <head> <title> HTML 5 </title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> </head> <body> <form method="post" action="http://example.com/"> <div id="holder" style="" id="holder" class="holder_default"> <img src="" id="image_droped" width="200" style="border: 3px dashed #7A97FC;" class=" hidden"/> </div> </form> </body> </html>

2014-06-28 20:24:49

@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();

工作小提琴

2016-07-29 06:52:01

这是我得出的结论。

使用Jquery和Html。这将把它添加到插入文件中。

2019-01-26 05:16:59