html5 文件api使用示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html5文件API</title> <script type="text/javascript">function getName(){ var file = document.getElementById("file"); //document.getElementById("file").files // 返回 FileList對象 var files = file.files; for(i=0;i<files.length;i++){ //獲取文件的名稱 alert(files[i].name); } }
function getSize(){ var file = document.getElementById("file1");
var size =file.files[0].size;//顯示文件的尺寸 /* excel:application/vnd.ms-excel word:application/msword(.doc), application/vnd.openxmlformats-officedocument.wordprocessingml.document(.docx) 實際應用中要根據具體的type類型 限制 上傳的類型 ,用正則表達式驗證 */ var type =file.files[0].type;//文件的類型 image/png,image/jpeg,text/plain,text/html //對文件列表FileList才有意義,對file對象沒有作用,也就是說上傳單個文件也要有數組形式訪問其屬性 .. var name =file.files[0].name; document.getElementById("mark").innerHTML=type; alert(size+","+type+","+name);} </script> </head> <body>
<form action=""> <!-- html5為文件域添加multiple="multiple"支持多文件上傳，用逗號分隔 --> 附件:<input type="file" id="file" multiple="multiple" onblur="getName();" > <!-- 添加accept屬性 限制要選擇的文件的類型，但只是在打開文件選擇那一刻篩選出符合條件的文件 ,例如:下面要求文件類型為圖片,打開文件選擇框時只會列出所有的圖片文件; 具體情況各大瀏覽器支持不一樣: Firefox 列出所有文件，chrome自動篩選出符合條件的文件,IE9和FF一樣， 可以說不支持吧 --> 頭像 : <input type="file" id="file1" accept="image/*"> 文件的類型:<mark id="mark"></mark> <input type="button" value="獲取文件大小" onclick="getSize();"> </form> <!-- FileReader接口 示例 -->
<input type="file" id="rd"> <span id="msg"></span> <input type="button" value="以文本形式讀取" onclick="readAsText();"> <input type="button" value="以二進制形式讀取" onclick="readAsBinaryString();"> <input type="button" value="以dataURL形式讀取" onclick="readAsDataURL();">
<script type="text/javascript">
var file = document.getElementById("rd");
if (typeof FileReader =="undefined"){ msg.value="您的瀏覽器不支持FileReader"; //禁用文件域 file.setAttribute("disabled","disabled"); } else{ console.info("恭喜您可以使用..."); } //將文件讀取為文本 function readAsText(){
var file = document.getElementById("rd").files[0]; var reader = new FileReader(); reader.readAsText(file); //onload 加載成功 后觸發 reader.onload=function(e){ var msg = document.getElementById("msg"); //把讀取到的文本信息顯示 //msg.value=this.result; console.info(reader.result); } } //將文件讀取為二進制function readAsBinaryString(){
var file = document.getElementById("rd").files[0]; var reader = new FileReader(); //二進制形式讀取 reader.readAsBinaryString(file); //onload 加載成功 后觸發 reader.onload=function(e){ var msg = document.getElementById("msg"); //把讀取到的文本信息顯示 //msg.value=this.result; console.info(reader.result); console.info("load觸發,加載成功..."); } //加載結束觸發,不管成功失敗 reader.onloadend=function(){ console.info("loadend觸發,加載結束..."); } //開始加載觸發 reader.onloadstart=function(){ console.info("loadstart觸發,開始加載..."); } //記載出錯觸發 reader.onerror=function(){ console.info("error觸發,加載過程中出現錯誤..."); } //中斷記載觸發 reader.onabort=function(){ console.info("abort觸發,加載中斷觸發..."); } //記載進程 ,可用progress標簽顯示加載進度 reader.onprogress=function(){ console.info("progress觸發,加載中..."); } }//將文件讀取為DataURL function readAsDataURL(){ var file = document.getElementById("rd").files[0]; var reader = new FileReader(); //圖片驗證 if (!/image\/\w+/.test(file.type)){ alert("只能輸出圖片"); return ; } //二進制形式讀取 reader.readAsDataURL(file); //onload 加載成功 后觸發 reader.onload=function(e){ var msg = document.getElementById("msg"); //把讀取到的文本信息顯示 //msg.value=this.result; //console.info(reader.result); //把圖片顯示到頁面中.... msg.innerHTML='<img src='+this.result+' />'; } } </script> </body> </html></pre>
