<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div{
width: 200px;
height: 200px;
background: red;
margin: 100px;
}
</style>
<script>
/* dataTransfer对象：
1.files:获取外部拖拽的文件，返回一个filesList列表，是对象集合，自然有length属性；
2.filesList下有个type属性，返回文件的类型；
3.fileReader:读取文件信息
①readAsDataURL(argument):参数为读取的文件对象，将文件读取为DataUrl；
②onload:当文件读取成功时触发此事件；
③this.result:获取读取的文件数据，如果是图片，将返回base64格式的图片数据；
*/
onload= function () {
var oDiv=document.getElementById('div');
var oUl=document.getElementById('ul');
oDiv.ondragenter= function () {
this.innerHTML='现在可以释放文件了';
}
oDiv.ondragover= function (ev) {
ev=ev||event;
ev.preventDefault();
}
oDiv.ondragleave= function () {
this.innerHTML='将文件拖放到此区域';
}
oDiv.ondrop= function (ev) {
ev=ev||event;
ev.preventDefault(); //浏览器的默认行为是：将图片文件拖放到此处会在浏览器中打开图片
var fs=ev.dataTransfer.files;
//console.log(fs.length);
//console.log(fs[0].type);
for(var i= 0,len=fs.length;i<len;i++){
/* indexOf(searchvalue,formindex):返回某个指定的字符串值在字符串中首次出现的位置。
1.searchvalue:规定需检索的字符串类型；
formindex：可选的整数参数，规定在字符串中需检索的位置，它的合法取值是0-stringObject.length-1,如果省略此参数，则将从字符串的首字符开始检索；
2.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。
如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
3.indexOf()对大小写敏感；
4.如果要检索的字符串没有出现，则返回-1；
*/
if(fs[i].type.indexOf('image')!==-1){
var fd = new FileReader();
fd.readAsDataURL(fs[i]);
fd.onload= function () {
//console.log(this.result);
var oLi=document.createElement('li');
var oImg=document.createElement('img');
oImg.src=this.result;
oUl.appendChild(oLi);
oLi.appendChild(oImg);
}
}else{
alert('亲，请上传图片！');
}
}
}
}
</script>
</head>
<body>
<div id="div">将文件拖放到此区域</div>
<ul id="ul"></ul>
</body>
</html>