<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="html5/js/jquery-2.0.0.min.js"></script>
</head>
<body>
<div name="image" id="dropbox" style="position:relative;min-300px;min-height:100px;text-align: center;line-height:100px;color:#777;font-size:32px;border:3px dashed silver;">
<input style="color:#fff;100%;height:100px;margin:0px auto;cursor:pointer;position:absolute;top:0px;right:0px;opacity:0;filter: alpha(opacity=0);" id="myfile" name="myfile" type="file" >
请拖拽图片放到这里
</div>
<div style=" 250px;height: 250px;">
<img id="showimg" style="min- 250px;height: 250px;" src="" />
<p id="inofimg" style=" 150px;height: 50px;"></p>
</div>
</body>
<script type="text/javascript">
$(function(){
$(document).on({
dragleave:function(e){
e.preventDefault();
},
drop:function(e){
e.preventDefault();
},
dragenter:function(e){
e.preventDefault();
},
dragover:function(e){
e.preventDefault();
}
});
var dropboxfile = document.getElementById("dropbox");
dropboxfile.addEventListener('drop',function(e){
e.preventDefault();
var fileList = e.dataTransfer.files;
var fileNum = fileList.length;
if(fileNum==0){
return false;
}
if(fileList[0].type.indexOf('image')=== -1){
alert('该文件不是图片');
return false;
}
var imgurl = window.URL.createObjectURL(fileList[0]);
var imgname = fileList[0].name;
var imgsize = Math.floor((fileList[0].size)/1024);
if(imgsize>1024){
alert('文件大小不能超过1M');
return false;
}
var info = "<span>文件名'"+imgname+"'</span><span>文件大小'"+imgsize+"'kb</span>";
$("#showimg").attr('src',imgurl);
$("#inofimg").html(info);
})
});
</script>
</html>
这里主要用到三个 一个是html5的这个几个拖动dragleave，drop，dragenter，dragover，二是addEventListener监听，三个是html5的file的API