遇到項目，要求做一個影像系統，對於前端開發需要了解file的相關屬性，以及如何開發。工欲善其事，必先利器嘛。度娘一陣子搜索，找資料。這年頭，需要的是你解決問題的能力啊！
參考應用：https://www.cnblogs.com/sunliyuan/p/5737928.html
http://blog.okbase.net/jquery2000/archive/1296.html（解釋的也很清楚）
http://blog.csdn.net/qingyjl/article/details/52003567
文件(File) 接口提供有關文件的信息，並允許網頁中的 JavaScript 訪問其內容。
File 接口基於Blob，繼承了 blob的功能並將其擴展使其支持用戶系統上的文件。Blob對象表示不可變的類似文件對象的原始數據。Blob表示不一定是JavaScript原生形式的數據。
有關於file的官方文檔，可以參看一個較為專業的官網：https://developer.mozilla.org/zh-CN/docs/Web/API/File 這個里面講述的非常詳細，有時間多看看。
這里可以了解到file接口的屬性。
File.name；返回當前 File 對象所引用文件的名字。
File.size；返回文件的大小。
File.lastModified；返回當前 File 對象所引用文件最后修改時間， 自 1970年1月1日0:00 以來的毫秒數。
File.webkitRelativePath 返回 File 相關的 path 或 URL。
是時候來個例子，
// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput"> var fileInput = document.getElementById("myfileinput"); // files is a FileList object (simliar to NodeList) var files = fileInput.files; for (var i = 0; i < files.length; i++) { var type = files[i].type; var name = files[i].name; alert("Filename: " + name + " , Type: " + type); }
files 是一個 FileList 對象(類似於NodeList對象)。input里type=file里都有這個files屬性，意為獲取文件集合。
再上個完整例子：
<!DOCTYPE HTML> <html> <head> </head> <body> // multiple屬性可以讓用戶能選擇多個文件 <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // 獲取到input元素 var fileInput = document.querySelector("#myfiles"); var files = fileInput.files; // 獲取到所選文件數量 var fl=files.length; var i=0; while ( i < fl) { var file = files[i]; alert(file.name); i++; } } // 設置change事件處理函數 document.querySelector("#myfiles").onchange=pullfiles; </script> </html>
好了，到這里我們來講一下上傳圖片，將圖片顯示出來放到頁面的方法。HTML5讀取input[type=file]中的圖片
參考資料：《HTML5學習之FileReader接口》——http://blog.csdn.net/zk437092645/article/details/8745647
來個demo
<form id="imgForm">
<input type="file" class="addBorder">
<br/>
<button type="button" onclick="loadImg()">獲取圖片</button>
</form>
<div class="addBorder" id="imgDiv">
<img id="imgContent">
</div>
function loadImg(){ //獲取文件 var file = $("#imgForm").find("input")[0].files[0]; //創建讀取文件的對象 var reader = new FileReader(); //創建文件讀取相關的變量 var imgFile; //為文件讀取成功設置事件 reader.onload=function(e) { alert('文件讀取完成'); imgFile = e.target.result; //獲取當前文件的內容 console.log(imgFile); $("#imgContent").attr('src', imgFile); }; //正式讀取文件 reader.readAsDataURL(file); }
這里要注意 reader.onload是最后執行的，在正式讀取文件之后。
reader.readAsDataURL(file);//轉化為base64格式。
還有的是轉化為blob對象的，可以參看網站 https://www.cnblogs.com/saysmy/p/5626337.html
<input type="file" name="2" class="file" accept="image/*" capture="camera" id="file39" />
var file = document.getElementById(idFile);
var fileList = file.files; //獲取的圖片文件
var imgUrl = window.URL.createObjectURL(fileList[i]);
可以參考網站：http://blog.csdn.net/fd214333890/article/details/71250488