廢話不多說了，說一下今天給大家分享的是 html5上傳圖片。我們是在移動端使用的，但是這個在pc上也通用兼容性我只在谷歌測試過。之前一直用的angular寫的《用HTML5的File API做上傳圖片預覽能》。今天摒棄angular的東西分享一個html5 + js 圖片上傳案例。那么今天還是按照一定的步驟來講吧。
通過getElementById獲取節(jié)點，判斷瀏覽器的兼容性，對于不支持FileReader接口的瀏覽器將給出一個提示并禁用input，否則監(jiān)聽input的change事件。
JavaScript Code復制內(nèi)容到剪貼板
-
- var input = document.getElementById("upload");
- if(typeof FileReader==='undefined'){
-
- input.setAttribute('disabled','disabled');
- }else{
- input.addEventListener('change',readFile,false);
- }
然后，當file_input的change事件觸發(fā)時，調(diào)用函數(shù)readFile()。在readFile中，我們首先獲取file對象，然后通過file的type屬性來檢測文件類型，我們當然只允許選擇圖像類型的文件，然后我們new一個FileReader實例，并調(diào)用readAsDataURL方法來讀取選中的圖像文件，最后在onload事件中，獲取到成功讀取的文件內(nèi)容，并以插入一個img節(jié)點的方式顯示選中的圖片。
JavaScript Code復制內(nèi)容到剪貼板
- function readFile(){
- var file = this.files[];
- if(!/image\/\w+/.test(file.type)){
- alert("文件必須為圖片！");
- return false;
- }
- var reader = new FileReader();
- reader.readAsDataURL(file);
-
- reader.onload = function(e){
- var data = this.result.split(',');
- var tp = (file.type == 'image/png')? 'png': 'jpg';
- var a = data[];
-
- ... ...
- }
- };
