拖动文件到HTML,html5 – 拖放文件到标准html文件输入

最新推荐文章于 2022-07-28 22:28:31 发布

weixin_39893042

最新推荐文章于 2022-07-28 22:28:31 发布

阅读量142

点赞数

文章标签：拖动文件到HTML

本文介绍了一种使用JavaScript实现的拖放文件上传功能的方法，该方法使文件输入框能够跟随鼠标移动，并提供了一个额外的点击上传按钮。此功能主要适用于Chrome、Firefox和Safari浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

})

#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,.3);

border-radius: 20px;

font-family: Arial;

text-align: center;

position: relative;

line-height: 180px;

font-size: 20px;

color: rgba(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,.5);

color: rgba(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;

}

Drop files here...

or click here..

此方法的拖放功能仅适用于Chrome，Firefox和Safari。

(不知道它是否与IE10工作)，但对于其他浏览器，“或点击这里”按钮工作正常。

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

取消注释不透明度：0;文件输入只有可见，所以你可以看到发生了什么。