HTML5批量拖拽图片到网页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖拽本地图片到页面指定元素内</title><script type="text/javascript">
function isImage(type) {
switch (type) {
case 'image/jpeg':
case 'image/png':
case 'image/gif':
case 'image/bmp':
case 'image/jpg':
return true;
default:
return false;
}
}
window.onload = function() {
/*
拖拽事件监听========================================
*/
var oDropBox = document.getElementById('dropBox');
oDropBox.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);
function handleDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var t = f.type ? f.type : 'n/a',
reader = new FileReader(),
looks = function (f, img) {
oDropBox.innerHTML += f.name + " " + img + " ";
},
isImg = isImage(t),
img;
// 处理得到的图片
if (isImg) {
reader.onload = (function (theFile) {
return function (e) {
img = '<img style="width:100px;height:80px;" src="' + e.target.result + '" title="' + theFile.name + '"/>';
looks(theFile, img);
};
})(f)
reader.readAsDataURL(f);
} else {
img = '"o((>ω< ))o"，你传进来的不是图片！！';
looks(f, img);
}
}
}
//===============================================
}
</script></head>
<body>
<div>
</div>
<div id="dropBox" style="float:left;width:1000px;height:800px;margin:10px 0 0 0;border:1px solid #015EAC;color:#666;overflow:scroll;">
</div>
</body>
</html>
demo连接：
http://lanliang.web-164.com/html5/drag/index.html