Html5上傳圖片移動端、PC端通用代碼

2020-03-24 17:44:04

字體：大中小

來源：轉載

供稿：網友

廢話不多說了，說一下今天給大家分享的是 html5上傳圖片。我們是在移動端使用的，但是這個在pc上也通用兼容性我只在谷歌測試過。之前一直用的angular寫的《用HTML5的File API做上傳圖片預覽能》。今天摒棄angular的東西分享一個html5 + js 圖片上傳案例。那么今天還是按照一定的步驟來講吧。HTML第一步創(chuàng)建html，我們在頁面中放置一個文件選擇的input#upload（PS：偷懶一下，這里就不再次寫案例了直接復制的我們的頁面）CSS Code復制內容到剪貼板
overflow:hidden; margin:%autoauto; color:#FFFFFF; } con.btn{ width:%; height:px; line-height:px; text-align:center; background:#dbc; display:block; font-size:px; border-radius:px; } upload{ float:left; position:relative; } upload_pic{ display:block; width:%; height:px; position:absolute; left:; top:; opacity:; border-radius:px; }
Javascript通過getElementById獲取節(jié)點，判斷瀏覽器的兼容性，對于不支持FileReader接口的瀏覽器將給出一個提示并禁用input，否則監(jiān)聽input的change事件。JavaScript Code復制內容到剪貼板
//獲取上傳按鈕 varinput=document.getElementById( upload ); if(typeofFileReader==='undefined'){ //result.innerHTML= 抱歉，你的瀏覽器不支持FileReader input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); }
然后，當file_input的change事件觸發(fā)時，調用函數readFile()。在readFile中，我們首先獲取file對象，然后通過file的type屬性來檢測文件類型，我們當然只允許選擇圖像類型的文件，然后我們new一個FileReader實例，并調用readAsDataURL方法來讀取選中的圖像文件，最后在onload事件中，獲取到成功讀取的文件內容，并以插入一個img節(jié)點的方式顯示選中的圖片。JavaScript Code復制內容到剪貼板
functionreadFile(){ varfile=this.files[]; if(!/image///w+/.test(file.type)){ alert( 文件必須為圖片！ ); returnfalse; } varreader=newFileReader(); reader.readAsDataURL(file); //當文件讀取成功便可以調取上傳的接口，想傳哪里傳哪里（PS：你們可以把你們的靚照偷偷發(fā)給我！） reader.onload=function(e){ vardata=this.result.split(','); vartp=(file.type=='image/png')?'png':'jpg'; vara=data[]; //需要上傳到服務器的在這里可以進行ajax請求 ...... } };
寫到這里我們已經完成了圖片上傳的功能了，大家有興趣的自己動手嘗試一下，不懂的地方或者我寫錯的地方一定要找我哦。FileReader的方法和事件html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html5指南-4.使用Geolocation實現定位功能

下一篇：HTML body標簽中的相關標簽2