在HTML5中，使用DataTransfer对象中提供的方法，可以实现浏览器与其他应用程序之间文件的拖动。虽然HTML4之前的版本也支持拖放数据的操作，但仅局限于浏览器中，不支持浏览器之外的数据。
今天就举个拖放上传图片的例子吧。
Html部分：
|
1
2
3
4
5
6
7
|
|
Css部分：
|
1
2
3
4
|
* {margin:0;padding:0;}
.content {margin:50pxauto;width:600px;border:1pxsolid#ccc;padding:20px;}
.content .drag {width:596px;min-height:300px;background:url(bg.png)no-repeatcentercenter;border:2pxdashed#666;}
.spn-img img {max-width:596px;}
|
此时效果如下：
Js部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
varfileUploadPreview =function(aFile) {
if(typeofFileReader =="undefined") {
alert("浏览器不支持");
}
vari;
for(i = 0; i
vartmp = aFile[i];
varreader =newFileReader();
reader.readAsDataURL(tmp);
reader.Onload= (function(f) {
returnfunction(e) {
document.getElementById("spn-img").innerHTML +="
}
})(tmp)
}
}
vardropFile =function(e) {
fileUploadPreview(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
|
Ok，以上是全部代码，然后我们就可以把图片拖放到虚线区域了，然后会有图片的预览效果，并且支持多张同时上传。效果如下图：
图片过宽时会被自动缩小的虚线框宽度，虚线框高度自动。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有