添加ondragstart监听事件，为被拖放的源元素添加ondragstart监听事件，并在事件触发时将源元素中的内容附加到dataTransfer对象。最后，将事件处理程序DragStart()添加到window.onload事件。函数DragStart(){varsource=document.getElementById("dragSource");//拖放源元素//监听dragstart事件并作用于源元素source.addEventListener("dragstart",function(e){e.dataTransfer.setData('text/plain',e.target.innerHTML);//向dataTransfer对象添加数据e.dataTransfer.effectAllowed="copy";},false);}//添加函数DragStart到window.onload监听事件window.addEventListener("load",DragStart,false);添加dragover监听事件，为被拖动的目标元素添加dragover监听事件，事件触发时改变目标元素的样式，屏蔽浏览器默认处理事件。将事件处理程序DragOver()添加到window.onload事件。对于目标元素preventDefault()，必须取消浏览器的默认处理，否则无法实现拖拽功能。functionDragOver(){//拖放目标元素vartarget=document.getElementById('dropTarget');//监听dragover事件并作用于目标元素target.addEventListener("dragover",function(e){//改变样式this.className="dragover";//取消浏览器的默认处理e.preventDefault();},false);}//在window.onload中添加函数DragStart监听事件window.addEventListener("load",DragOver,false);为被拖放的目标元素添加ondrop监听事件。当事件被触发时，获取dataTransfer对象中的数据并追加到目标元素上，样式也恢复了。添加处理函数Drop()以将侦听器事件添加到window.onload事件。functionDrop(){//拖放目标元素vartarget=document.getElementById('dropTarget');//监听drop事件并作用于目标元素target.addEventListener('drop',function(e){vardata=e.dataTransfer.getData('text/plain');//获取dataTransfer中的数据objectthis.innerHTML+=data;e.dataTransfer.dropEffect="copy";//恢复样式this.className=""},false);}//在window.onload中添加函数DragStart监听事件window.addEventListener("load",Drop,false);文件api提供了html5中文件操作的文件api，以编程方式选择和访问文件数据。如：FileList对象、File对象、Blob接口、FileReader接口增加了标签功能。在html5中，文件类型的表单元素添加了多重特性和接受特性。得到一个FileList对象，它是一个File对象的列表。accept特性通过文件上传指定可以提交的文件类型，实现打开文件窗口时，默认选中指定的文件类型：FileList对象和File对象FileList对象中的每个文件都是一个File对象示例：

functionShowFiles(){//获取FileList对象varfileList=document.getElementById(“文件”）。文件；varmsg=document.getElementById("msg");变种文件；for(vari=0;i";}}Blob对象Blob对象表示原始二进制数据，Blob接口有两个属性：size和type首先，size属性表示Blob对象的字节长度。您可以使用FileReader接口读取Blob对象的二进制数据。如果Blob对象没有字节数，则为0。其次，type属性表示Blob对象的MIME类型。如果类型未知，则返回一个空字符串。三、slice()方法，使用slice()方法可以实现对文件的切分，返回一个新的Blob对象。File对象和Blob对象File对象继承了Blob对象，所以File对象也可以使用Blob对象的属性和方法（File对象可以使用size属性和type属性）来获取文件的大小和类型示例：

functionShowType(){//获取FileList对象varfiles=document.getElementById("files").files;varmsg=document.getElementById("msg");变种文件；for(vari=0;i";msg.innerHTML+="文件类型："+file.type+";
";}}FileReader接口卡FileReader接口提供了一些读取文件的方法和保护读取结果的事件模型。FileReader接口主要是将文件读入内存，读取文件中的数据。提前检测浏览器是否支持，实现接口FileReaderif(typeofFileReader=="undefined"){console.log();}else{varreader=newFileReader();}FileReader接口三个属性：返回读取的文件读取状态数据时出错readyState属性，只读读取文件状态：EMPTYP，值为0，表示已经构造了新的FileReader接口，没有调用read方法时的默认状态。LOADING，值为1，表示有读取文件的方法是读取File对象或Blob对象，没有错误发生。DONE，值为2，表示读取文件结束，可能是整个File对象或Blob对象已经完全读入内存，文件读取过程出错，或者使用abort()方法强行退出中断阅读过程。result属性，只读，获取已经读取的文件数据。如果是图片，则返回base64格式的图片数据。error属性，只读获取文件读取过程中出现的错误：4种NotFoundError，找不到要读取的资源文件。FileReader接口会返回NotFoundError错误，读取文件的方法也会抛出NotFoundError错误异常SecurityError，发生了安全错误。FileReader接口会返回SecurityError错误，读取文件的方法也会抛出SecurityError错误异常NotReadableError，无法读取的错误。FileReader接口会返回NotReadableError错误，读取文件的方法也会抛出NotReadableError错误异常EncodingError，这是编码限制的错误。通常数据URL所指示的URL的长度是有限的。FileReader接口的第一个方法，即readAsArrayBuffer()方法，将文件读取为数组缓冲区readAsArrayBuffer();其中代表一个Blob对象文件。readAsArrayBuffer()方法将读取Blob对象的文件作为数组缓冲区。其次，readAsBinaryString()方法会将文件读取为二进制字符串。readAsBinaryString();其中代表一个Blob对象文件。readAsBinaryString()方法将Blob对象的文件读取为二进制字符串。第三，readAsText()方法将文件作为二进制字符串读取。readAsText(,);//读取为文本，encoding为文本的编码方式四、readAsDataURL()方法读取文件为DataURL字符串：readAsDataURL();//读取asaDataURLstring五、abort()方法中断读取操作abort()//无参数接口事件loadstart事件，读取数据时触发的事件proress事件，读取数据时触发的事件load事件，事件abort事件在数据读取成功完成时触发，eventerror事件在读取数据中断时触发，eventloadend事件在读取数据发生错误时触发，eventloadend事件在数据读取完成时触发。数据读取可能成功也可能失败FileReader接口示例：//readGetfilefunctionReadAs(action){v??arblob=document.getElementById("files").files[0];如果（blob）{varreader=newFileReader();//声明接口对象//读取文件方法switch(action.toLowerCase()){case"binarystring":reader.readAsBinaryString(blob);休息;案例“arraybuffer”：reader.readAsArrayBuffer(blob);休息;案例“文本”：reader.readAsText(blob)；休息;case"dataurl":reader.readAsDataURL(blob);休息;}reader.onload=function(e){//访问FileReader的接口属性result，获取读入内存的内容varresult=这个。结果；//如果是图片文件if(/image\/\w+/.test(blob.type)&&action.toLowerCase()=="dataurl"){document.getElementById("result").innerHTML="![]()";}else{document.getElementById("result").innerHTML=result;}}}}FileReader接口的事件示例：

varblob=document.getElementById("files").files[0];varmessage=document.getElementById("message");varreader=newFileReader();//添加loadstart事件reader.onloadstart=function(e){}//添加进度事件reader.onprogress=function(e){}//添加加载事件reader.onload=function(e){}//添加中止事件reader.onabort=function(e){}//添加错误事件reader.onerror=function(e){}//添加加载结束eventreader.onloadend=function(e){}将图像拖入浏览器示例：定义一个拖放事件处理函数dropHandle()定义一个用于加载单个文件的函数loadImg()//目的被标记元素的变量vartarget;//drop事件处理函数dropHandle(e){//得到被拖拽的文件varfileList=e.dataTransfer.files,fileType;//遍历for(vari=0;i