标签：
（本内容部分节选自《HTML 5从入门到精通》）
————————————————————————————————————————————————————————
在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，通过添加multiple属性，在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。File对象有两个属性，name属性表示文件名，不包括路
径，lastModifiedDate属性表示文件的最后修改日期。
得到文件信息：
Blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的MIME类型，如果是未知类型，则返回一个空字符串。
文件筛选：
对于图像类型的文件，blob对象的type属性都是以“image/”开头的，后面紧跟这图像的类型，利用此特性我们可以在JavaScript中判断用户选择的文件是否为图像文件，如果在批量上传时，只允许上传图像文件，可以利用该属性，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文件与拖放</title> </head> <script language="javascript"> function ShowName() { var file; for(var i=0; i<document.getElementById("file").files.length;i++) { file=document.getElementById("file").files[i]; alert(file.name); } } function ShowFileType() { var file; file=document.getElementById("file").files[0]; var size = document.getElementById("size"); size.innerHTML = file.size; var type = document.getElementById("type"); type.innerHTML = file.type; } function FileFliter() { var file; for(var i=0; i<document.getElementById("file").files.length;i++) { file=document.getElementById("file").files[i]; if(! /image\/\w/.test(file.type)) { alert(file.name+"不符合图片格式要求！"); break; } else { alert(file.name+"合格"); } } } </script> <body> <input type="file" id="file" multiple size="20"/> <input type="button" onClick="ShowName()" value="upload"/> <p><input type="button" onClick="ShowFileType()" value="file_info"/> <p>字节长度：<span id="size"></span> <p>文件类型：<span id="type"></span> <p><input type="button" value="check" onClick="FileFliter();"/> <p>选择图片：<input type="file" id="file" accept="images/*"/> </body> </html>
选择文件
————————————————————————————————————————————————————————
FileReader 的接口拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及它们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
对浏览器是否支持该接口+使用第三第四个预览图片和文件的使用方法如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文件与拖放</title> 6 </head> 7 <script language="javascript"> 8 function TestScan() 9 { 10 if(typeof FileReader == ‘undefined‘) 11 { 12 alert("浏览器没有实现FileReader接口! "); 13 } 14 else 15 { 16 alert("有此接口！"); 17 } 18 } 19 function readImg() 20 { 21 var file = document.getElementById("file").files[0]; 22 if(! /image\/\w/.test(file.type)) 23 { 24 alert("图片格式不符！"); 25 return false; 26 } 27 var reader=new FileReader(); 28 reader.readAsDataURL(file); 29 reader.onload = function(e) 30 { 31 var result = document.getElementById("result"); 32 result.innerHTML = ‘<img src="‘+this.result+‘" alt=""/>‘ 33 } 34 } 35 function readText() 36 { 37 var filee = document.getElementById("filee").files[0]; 38 var reader=new FileReader(); 39 reader.readAsText(filee); 40 reader.onload = function(e) 41 { 42 var result2 = document.getElementById("resultt"); 43 result2.innerHTML = ‘<img src="‘+this.result+‘" alt=""/>‘ 44 } 45 } 46 </script> 47 <body> 48 <input type="button" value="检查浏览器" onClick="TestScan();"/> 49 <!--预览图片--> 50 <p><label>选择要预览的图片：</label> 51 <input type="file" id="file"/> 52 <input type="button" value="读取图像" onClick="readImg()"/> 53 <div name="result" id="result"></div> 54 <p><label>选择要预览的文本文件：</label> 55 <input type="file" id="filee"/> 56 <input type="button" value="读取文件" onClick="readText()"/> 57 <div name="result2" id="resultt"></div> 58 </body> 59 </html> 60
效果图：
可以通过以下代码来了解其执行的步骤：
1 <!DOCTYPE html><head> 2 <meta charset="UTF-8"> 3 <title>fileReader对象的事件先后顺序</title> 4 </head> 5 <script language="javascript"> 6 var result=document.getElementById("result"); 7 var input=document.getElementById("input"); 8 if(typeof FileReader==‘undefined‘) 9 { 10 result.innerHTML = "<p class=‘warn‘>抱歉，你的浏览器不支持 FileReader</p>"; 11 input.setAttribute( ‘disabled‘,‘disabled‘ ); 12 } 13 function readFile() 14 { 15 var file = document.getElementById("file").files[0]; 16 var reader = new FileReader(); 17 18 reader.onload = function(e) 19 { 20 result.innerHTML = ‘<img src="‘+this.result+‘" alt=""/>‘ 21 alert("load"); 22 } 23 reader.onprogress = function(e) 24 { 25 alert("progress"); 26 } 27 reader.onabort = function(e) 28 { 29 alert("abort"); 30 } 31 reader.onerror = function(e) 32 { 33 alert("error"); 34 } 35 reader.onloadstart = function(e) 36 { 37 alert("loadstart"); 38 } 39 reader.onloadend = function(e) 40 { 41 alert("loadend"); 42 } 43 reader.readAsDataURL(file); 44 } 45 </script> 46 47 <p> 48 <label>请选择一个图像文件：</label> 49 <input type="file" id="file" /> 50 <input type="button" value="显示图像" onclick="readFile();" /> 51 </p> 52 <div name="result" id="result"> 53 <!-- 这里用来显示读取结果 --> 54 </div> 55 56
————————————————————————————————————————————————————————
在HTML5中，提供了直接支持拖放操作的API。虽然HTML5之前已经可以使用mousedown,mousemove,mouseup来实现拖放操作，但是只支持在浏览器内部的拖放，而在HTML5中，已经支持在浏览器与其他应用程序之间的数据的互相拖动，同时也大大简化了有关于拖放方面的代码。
额，好像FireFox对它有点反应，我这里不想过多学习，感觉实现功能上一般般。。。不过你拖动它可以在方框里显示，也可以直接搜索
1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>拖放示例</title> 5 <script type="text/javascript"> 6 function init() 7 { 8 var source = document.getElementById("dragme"); 9 var dest = document.getElementById("text"); 10 // (1) 拖放开始 11 source.addEventListener("dragstart", function(ev) 12 { 13 // 向dataTransfer对象追加数据 14 var dt = ev.dataTransfer; 15 dt.effectAllowed = ‘all‘; 16 //(2) 拖动元素为dt.setData("text/plain", this.id); 17 dt.setData("text/plain", "明日科技欢迎你"); 18 }, false); 19 // (3) dragend：拖放结束 20 dest.addEventListener("dragend", function(ev) 21 { 22 //不执行默认处理（拒绝被拖放） 23 ev.preventDefault(); 24 }, false); 25 // (4) drop:被拖放 26 dest.addEventListener("drop", function(ev) 27 { 28 // 从DataTransfer对象那里取得数据 29 var dt = ev.dataTransfer; 30 var text = dt.getData("text/plain"); 31 dest.textContent += text; 32 //(5) 不执行默认处理（拒绝被拖放） 33 ev.preventDefault(); 34 //停止事件传播 35 ev.stopPropagation(); 36 }, false); 37 } 38 //(6) 设置页面属性，不执行默认处理（拒绝被拖放） 39 document.ondragover = function(e){e.preventDefault();}; 40 document.ondrop = function(e){e.preventDefault();}; 41 </script> 42 </head> 43 <body onload="init()"> 44 <h1>拖放欢迎语</h1> 45 <!-- (7) 把draggable属性设为true --> 46 <div id="dragme" draggable="true" style="width: 200px; border: 1px solid gray;"> 47 请拖放 48 </div> 49 <br> 50 <div id="text" style="width: 200px; height: 200px; border: 1px solid gray;"></div> 51 </body> 52
具体来讲，你还可以用一些方法对它美化，不一一介绍，可查。
标签：
原文地址：http://www.cnblogs.com/puluotiya/p/4856483.html
