不知何時，突然對上傳文件按鈕起了濃厚的興趣，當然這源于工作的需要。當時為了順利上線，索性直接引用了jQuery的一個上傳組件，簡單粗暴。 后來閑下來，就對這個進行了一番研究，然后做了一個簡單的Demo。

友情提醒：不要上傳過大的文件，不然換誰都受不了，目前不支持坑爹的低版本IE

戳我看看

雖然有點丑，但是基本功能實現了就好

其實要實現這個功能挺簡單的，因為有現成的API可以參考，不會了還可以去搜一下別人做的，接下來我就說一下我對這個的研究和理解，如有錯誤，歡迎指正！

美化input type=file

當然原生的input可不是長的這個樣子，這里我們其實是把input的透明度設置為0，然后用span標簽來顯示上傳文件字樣，然后把它們重疊到一塊就行了。

file對象

File對象

這里我們獲取到這個File對象之后就可以獲取到上傳文件的一些屬性，比如：lastModified（代表文件的修改日期，而非上傳日期）、name、size（單位是b）、type（例如圖片就是"image/png"，然后我們可以根據image來判斷是否是圖片）等。 var file = e.target.files[0];//獲取File對象，這里是上傳單張圖片，[0]代表第一張圖片。如果多張，就是一個var file = e.target.files;var type = file.type.split('/')[0];//按照慣例，不應該由前端判斷格式，因為這里是根據后綴名判斷的，修改后綴名仍舊可以上傳，理應由后端根據文件格式來判斷。if (type !='image') {alert('請上傳圖片');return;}var size = Math.round(file.size / 1024 / 1024);if (size > 3) {alert('圖片大小不得超過3M');return;};

fileReader對象

接著講FileReader對象，這個比較復雜，可以考慮看下。

mozilla開發者文檔介紹，英文，勉強可以看一下。

不過歸納起來，我們依舊只需掌握幾個重要的點，

• readAsDataURL() 方法。//將文件讀取為base64的格式，也就是可以當成圖片的src
• result 屬性 //將讀取的數據保存在result里。
• progress 事件 //定時觸發，來獲取當前已上傳文件的大小，如進度條
• loade 事件 //文件上傳完成時觸發
• loadend 事件 //文件上傳完成時（不管成功、失敗）觸發

其他的諸如：readAsBinaryString()方法，loadstart事件等，知道是什么意思就行了。可以參考（由于是三年前寫的，有些不全，還是要以官方文檔為準）。前人栽的樹

var reader = new FileReader(); //新建FileReader對象reader.readAsDataURL(file); //讀取為base64//以下代碼可以刪除reader.onloadstart = function(){console.log('start'); //開始讀取};reader.onprogress = function(e){//這個是定時觸發的事件，文件較大的時候較明顯var p = '已完成：' + Math.round(e.loaded / e.total * 100) + '%' ;$(".file_upload").find(".progress").html(p);console.log('uploading'); //文件較大，就會出現多個uploading};reader.onabort = function(){console.log('abort'); //用作取消上傳功能};reader.onerror = function(){console.log('error'); //文件讀取出錯的時候觸發，暫模擬不出};reader.onload = function(){console.log('load complete'); //完成};//預覽代碼，沒在onload里面寫的原因是我不想reader.onloadend = function (e) {var dataURL = reader.result，image = '<img src="'+dataURL+'"/>'， //預覽圖片text = '<span>"'+dataURL+'"</span>'; //測試預覽textvar name = file.name,size = Math.round(file.size / 1024);var div = '<p>Name: '+name+'</p><p>Size: '+size+'kb</p>';var imglist = '<div class="img_box"><span class="delete">X</span>'+image + div+'</div>';$(".img_holder").html(imglist); }; 如果一切還算順利，那就要注意一下，刪除預覽圖片可能存在某些問題，刪除不僅僅要刪除頁面上展示的圖片，input里面的圖片也要清空，不然就會出問題。

PS：上傳多張圖片，原理差不多，不過需要注意幾點：

設置multiple來實現多張上傳功能。

需要使用循環來獲取上傳的每一張圖片，并把他們依次展示出來

每次循環都需要重新new一個新的FileReader對象。

總結

以上是生活随笔為你收集整理的input type=file 实现上传、预览、删除等功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。