這篇文章將為大家詳細(xì)講解有關(guān)Html5上傳圖片到移動(dòng)端、PC端的通用方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有淅川免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

HTML第一步創(chuàng)建html，我們?cè)陧?yè)面中放置一個(gè)文件選擇的input#upload（PS：偷懶一下，這里就不再次寫案例了直接復(fù)制的我們的頁(yè)面）

1. <p class="con4">     
    <span class="btn upload">上傳<input type="file" class="upload_pic" id="upload" /></span>     
   </p>

CSS注：css 寫的有些亂哈，看不懂的可以問(wèn)我，或者直接自己寫一下就ok。

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;      
}

Javascript

通過(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'){       
     //result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader";     
     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);       
     //當(dāng)文件讀取成功便可以調(diào)取上傳的接口，想傳哪里傳哪里（PS： 你們可以把你們的靚照偷偷發(fā)給我！）    
     reader.onload = function(e){       
         var data = this.result.split(',');      
         var tp = (file.type == 'image/png')? 'png': 'jpg';      
         var a = data[];      
         //需要上傳到服務(wù)器的在這里可以進(jìn)行ajax請(qǐng)求    
         ... ...      
     }      
};

寫到這里我們已經(jīng)完成了圖片上傳的功能了，大家有興趣的自己動(dòng)手嘗試一下，不懂的地方或者我寫錯(cuò)的地方一定要找我哦。 FileReader的方法和事件

關(guān)于“Html5上傳圖片到移動(dòng)端、PC端的通用方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享標(biāo)題：Html5上傳圖片到移動(dòng)端、PC端的通用方法
URL網(wǎng)址：http://chinadenli.net/article28/gsjgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、App開(kāi)發(fā)、網(wǎng)站改版、動(dòng)態(tài)網(wǎng)站、定制網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)