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

更多相关文章

随机推荐