file

在工做各類業務中，咱們常常會遇到一個上傳圖片，文件的功能，今天我就來總結下上傳文件功能。

1.疑問？

01.文件上傳是什麼？怎麼觸發的？它在各個瀏覽器長得什麼樣子的？

02.文件上傳怎麼操做？他是有什麼對象？對象有什麼方法和屬性？

下面咱們抱着這個心態來解疑！

2.解疑！

01.文件上傳是 <input type="file">能夠來點擊按鈕來彈出系統本身帶文件選項框

上代碼圖

接下來就看各個瀏覽器下<input type="file">下長什麼樣子的吧！（爲了寫博客，我硬生生的把五個瀏覽器都安在了我電腦上，也是蠻拼的，哈哈哈哈哈）

google

ie 

firefox

opera 

safa

你們都看到了<input type="file">的樣子了吧，各個瀏覽器默認樣式徹底不相同而且當咱們點到文字區域時也會觸發上傳彈窗（ie是瀏覽旁邊的那個長條）

因此咱們須要改變他的樣式，因此接下來就靠css來使他在各個瀏覽器表現一致了，上代碼

.fileUpload-group{
            position: relative;
            width:300px;
            height:80px;
            overflow: hidden;
            cursor: pointer;
            line-height: 80px;
            font-size: 16px;
            text-align: center;
            color: #fff;
            background-color: #e00;
            border-radius: 5px;
        }
        .fileUpload-group input{
            position: absolute;
            top:0;
            left:0;
            font-size: 300px;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }
        .fileUpload-group:hover{
            background-color: #e70;
        }

因此在全部瀏覽器下都表現這個樣式

另外多提一句<input type="file">只能選擇單個文件要想選擇多個文件要這樣寫<input type="file"  multiple>，若是要選擇文件夾上傳 能夠加入webkit的屬性webkitdirectory,不過好像就webkit支持

參考資料傳送門：危險的文件夾上牀框 http://www.cnblogs.com/index-html/p/dialog-phishing.html

02.   HTML文檔中每添加一個<input type="file">實際就建立了一個fileUpload實例對象，用戶能夠經過點擊file控件選擇本地文件！

附上w3c官網fileUpload參考資料http://www.w3school.com.cn/jsref/dom_obj_fileupload.asp

看代碼以下

var fileUp = document.getElementById("fileUpload");
        fileUp.onchange = function(){
            console.log(this.files);
        }

　　

若是咱們按住ctrl鍵那麼接下來就是這個樣子的

因此你們都明白了吧 因此files屬性的值是一個FileList類型的對象，它和數組相似，一樣擁有length屬性，用戶要上傳的文件Type name  size 等信息能夠用做與邏輯判斷用戶上傳的東西是否是符合需求，從而作判斷！固然這個也有兼容性IE9及如下版本不支持。

雖然咱們知道了文件的東西可是無法操做呀，難道就這麼傳給後臺而不作處理？顯然不是，咱們須要使用上html5新對象FileReader

附上html5新對象FileReader地址https://w3c.github.io/FileAPI/#dfn-filereader

咱們在谷歌控制檯下打出下面代碼

你們也看到了也有這些屬性固然在他的原型鏈又繼承另一些屬性看下圖

事件

• onload ：文件成功讀完時觸發
• onloadend ：文件讀完時觸發，不管成功與否
• onloadstart ：開始讀取文件時觸發
• onprogress ：文件讀取中，經常使用於獲取讀取進度
• onabort ：文件讀取操做中斷
• onerror ：文件讀取出錯

屬性

• result ：讀取到的文件內容，當讀取操做完成後生效
• readyState ：FileReader對象的當前狀態
• error ：出錯時的錯誤信息

方法

• abort ：中斷文件讀取操做
• readAsBinaryString ：將文件內容讀取爲二進制格式
• readAsDataURL ：將文件內容讀取爲DataURL格式，一般所說的base64格式
• readAsText ：將文件內容讀取爲文本

因此下面看代碼

 var fileUp = document.getElementById("fileUpload");
        fileUp.onchange = function(){
            var file = this.files[0];
            console.log(this.files);
            var reader = new FileReader();
            reader.onload = function(ev) {
                console.log(ev.target.result);
            };
            reader.readAsText(file);
        }

　　這篇博客重在瞭解file沒有任何案例吧

能夠參考京東前端鄭前輩的博客http://www.seejs.com/archives/668;http://www.seejs.com/archives/671;http://www.seejs.com/archives/691