首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >拖放文件到标准的html文件输入

拖放文件到标准的html文件输入
EN

Stack Overflow用户
提问于 2011-11-04 16:42:14
回答 14查看 252.5K关注 0票数 198

如今,我们可以将文件拖放到一个特殊的容器中,然后使用XHR 2上传文件。带有实时进度条等。非常酷的东西。Example here.

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

这有可能吗?有没有办法用正确的文件名(?)“填充”文件输入?从文件下载开始?(出于文件系统安全的原因,完整的文件路径不可用。)

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

编辑

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

EN

回答 14

Stack Overflow用户

回答已采纳

发布于 2016-08-16 15:29:11

下面的代码可以在Chrome和FF上运行,但是我还没有找到一个可以覆盖IE10+的解决方案:

代码语言:javascript
复制
// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register. 
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;

  // If you want to use some of the dropped files
  const dT = new DataTransfer();
  dT.items.add(evt.dataTransfer.files[0]);
  dT.items.add(evt.dataTransfer.files[3]);
  fileInput.files = dT.files;

  evt.preventDefault();
};
代码语言:javascript
复制
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
</body>
</html>

您可能希望使用addEventListener或jQuery (等)。来注册你的evt处理程序--这只是为了简单起见。

票数 120
EN

Stack Overflow用户

发布于 2012-10-04 01:08:05

我为此做了一个解决方案。

代码语言:javascript
复制
$(function () {
    var dropZoneId = "drop-zone";
    var buttonId = "clickHere";
    var mouseOverClass = "mouse-over";

    var dropZone = $("#" + dropZoneId);
    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");
    document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.addClass(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);

    if (buttonId != "") {
        var clickZone = $("#" + buttonId);

        var oleft = clickZone.offset().left;
        var oright = clickZone.outerWidth() + oleft;
        var otop = clickZone.offset().top;
        var obottom = clickZone.outerHeight() + otop;

        $("#" + buttonId).mousemove(function (e) {
            var x = e.pageX;
            var y = e.pageY;
            if (!(x < oleft || x > oright || y < otop || y > obottom)) {
                inputFile.offset({ top: y - 15, left: x - 160 });
            } else {
                inputFile.offset({ top: -400, left: -400 });
            }
        });
    }

    document.getElementById(dropZoneId).addEventListener("drop", function (e) {
        $("#" + dropZoneId).removeClass(mouseOverClass);
    }, true);

})
代码语言:javascript
复制
#drop-zone {
    /*Sort of important*/
    width: 300px;
    /*Sort of important*/
    height: 200px;
    position:absolute;
    left:50%;
    top:100px;
    margin-left:-150px;
    border: 2px dashed rgba(0,0,0,.3);
    border-radius: 20px;
    font-family: Arial;
    text-align: center;
    position: relative;
    line-height: 180px;
    font-size: 20px;
    color: rgba(0,0,0,.3);
}

    #drop-zone input {
        /*Important*/
        position: absolute;
        /*Important*/
        cursor: pointer;
        left: 0px;
        top: 0px;
        /*Important This is only comment out for demonstration purposes.
        opacity:0; */
    }

    /*Important*/
    #drop-zone.mouse-over {
        border: 2px dashed rgba(0,0,0,.5);
        color: rgba(0,0,0,.5);
    }


/*If you dont want the button*/
#clickHere {
    position: absolute;
    cursor: pointer;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: 20px;
    line-height: 26px;
    color: white;
    font-size: 12px;
    width: 100px;
    height: 26px;
    border-radius: 4px;
    background-color: #3b85c3;

}

    #clickHere:hover {
        background-color: #4499DD;

    }
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drop-zone">
    Drop files here...
    <div id="clickHere">
        or click here..
        <input type="file" name="file" id="file" />
    </div>
</div>

此方法的拖放功能仅适用于Chrome、Firefox和Safari。(不知道它是否适用于IE10),但对于其他浏览器,“或单击此处”按钮可以很好地工作。

当在某个区域上拖动文件时,输入字段只需跟随鼠标移动,我还添加了一个按钮。

取消注释不透明度:0;文件输入仅可见,因此您可以看到发生了什么。

票数 50
EN

Stack Overflow用户

发布于 2013-04-08 21:46:16

这就是"DTHML“HTML5的方法。Normal form input (如Ricardo Tomasi指出的只读)。然后,如果文件被拖入,它将被附加到窗体。这将需要修改操作页面以接受以这种方式上传的文件。

代码语言:javascript
复制
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);
}
代码语言:javascript
复制
#holder.hover { border: 10px dashed #0c0 !important; }
代码语言:javascript
复制
<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>

如果你能让整个窗口变成一个拖放区,那就更好了,参见How do I detect a HTML5 drag event entering and leaving the window, like Gmail does?

票数 32
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8006715

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档