廢話不多說(shuō)了，說(shuō)一下今天給大家分享的是 html5上傳圖片。我們是在移動(dòng)端使用的，但是這個(gè)在pc上也通用兼容性我只在谷歌測(cè)試過(guò)。之前一直用的angular寫(xiě)的《用HTML5的File API做上傳圖片預(yù)覽能》。今天摒棄angular的東西分享一個(gè)html5 + js 圖片上傳案例。那么今天還是按照一定的步驟來(lái)講吧。
CSS Code復(fù)制內(nèi)容到剪貼板
- <div class="con4">
- <span class="btn upload">上傳<input type="file" class="upload_pic" id="upload" /></span>
- </div>
CSS Code復(fù)制內(nèi)容到剪貼板
- con{
- width: %;
- height: auto;
- overflow: hidden;
- margin: % auto auto;
- 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;
- }
通過(guò)getElementById獲取節(jié)點(diǎn)，判斷瀏覽器的兼容性，對(duì)于不支持FileReader接口的瀏覽器將給出一個(gè)提示并禁用input，否則監(jiān)聽(tīng)input的change事件。
JavaScript Code復(fù)制內(nèi)容到剪貼板
-
- var input = document.getElementById("upload");
- if(typeof FileReader==='undefined'){
-
- input.setAttribute('disabled','disabled');
- }else{
- input.addEventListener('change',readFile,false);
- }
然后，當(dāng)file_input的change事件觸發(fā)時(shí)，調(diào)用函數(shù)readFile()。在readFile中，我們首先獲取file對(duì)象，然后通過(guò)file的type屬性來(lái)檢測(cè)文件類型，我們當(dāng)然只允許選擇圖像類型的文件，然后我們new一個(gè)FileReader實(shí)例，并調(diào)用readAsDataURL方法來(lái)讀取選中的圖像文件，最后在onload事件中，獲取到成功讀取的文件內(nèi)容，并以插入一個(gè)img節(jié)點(diǎn)的方式顯示選中的圖片。
JavaScript Code復(fù)制內(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[];
-
- ... ...
- }
- };
寫(xiě)到這里我們已經(jīng)完成了圖片上傳的功能了，大家有興趣的自己動(dòng)手嘗試一下，不懂的地方或者我寫(xiě)錯(cuò)的地方一定要找我哦。 FileReader的方法和事件
