html代码:
(ondragover 事件规定在何处放置被拖动的数据。)
<div class="content">
<form>
<div class="drag" ondrop = "dropFile(event)" ondragenter = "return false" ondragover = "return false">
<span class="spn-img" id="spn-img"></span>
</div>
</form>
</div>
css代码:
* {margin: 0; padding: 0;}
.content {margin:50px auto; width: 600px; border: 1px solid #ccc; padding: 20px;}
.content .drag {width: 596px; min-height: 300px; background: url(bg.png) no-repeat center center; border: 2px dashed #666;}
.spn-img img {max-width: 596px;}
js代码:
var fileUploadPreview = function (aFile) {
if (typeof FileReader == "undefined"(用于指示变量尚未用单等号进行赋值(常量未定义))) {
alert("浏览器不支持");
}
var i;
for (i = 0; i < aFile.length; i++) {
var tmp = aFile[i];
var reader = new FileReader();
reader.readAsDataURL(tmp);
reader.onload = (function (f) {
return function (e) {
document.getElementById("spn-img").innerHTML += "<img src=""+e.target.result+"" title=""+f.name+"">";
}
})(tmp)