标签：type属性 改变 slist his nbsp 知识点 创建 img 元素事件
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息)
1、创建简单的HTML标签：
<body> <div id="box">请将图片拖拽至此</div> <ul></ul> </body>
2、给标签加上简单的样式：
<style type="text/css"> div{ width: 300px; height: 300px; margin:100px; background: orange; } </style>
3、编写JS，用到四个拖放事件中的4个目标元素事件
dragenter事件：进入目标元素触发，改变div的innerHTML值：
var oDiv = document.getElementById(‘box‘);
var oUl = document.getElementsByTagName(‘ul‘)[0];
oDiv.ondragenter = function(){
this.innerHTML = ‘可以释放啦‘;
}
dragover事件：进入目标、离开目标之间，连续触发；注意：为什么要在这里加上这个事件？因为后续要触发drop事件的时候需要在dragover阻止，默认事件：
oDiv.ondragover = function( ev ){
ev.preventDefault();
}
dragleaver事件：离开目标元素触发
oDiv.ondragleave = function(){
this.innerHTML = ‘请将图片拖拽至此‘;
}
drop事件：在目标元素上释放鼠标触发
dataTransfer对象里面有一个files属性：获取外部拖拽的文件，返回一个filesList列表；filesList下有个type属性，返回文件的类型
oDiv.ondrop = function( ev ){
ev.preventDefault(); var fs = ev.dataTransfer.files;
// alert( fs.length ) // alert( fs[0].type )
for(var i=0; i<fs.length; i++){ if( fs[i].type.indexOf(‘image‘) != -1){ //利用返回的type属性值字符串包含image来判断文件类型 var fd = new FileReader(); //读取文件信息 fd.readAsDataURL( fs[i] ); //参数为读取的文件对象，将文件读取为DataURL fd.onload = function(){ //当读取文件成功完成的时候触onload事件
var oImg = document.createElement(‘img‘); var oLi = document.createElement(‘li‘); oImg.src = this.result; //获取文件的数据，当文件是图片，返回base64的图片数据 oLi.appendChild(oImg); oUl.appendChild(oLi); } }else{ alert(‘请上传图片类型！‘); } } }
标签：type属性 改变 slist his nbsp 知识点 创建 img 元素事件
原文地址：http://www.cnblogs.com/angelatian/p/6081156.html
