javascript input圖片上傳及預(yù)覽,FileReader預(yù)覽圖片
FileReader是前端進(jìn)行文件處理的一個(gè)重要的Api，特別是在對(duì)圖片的處理上，如果你想知道圖片的處理原理，你就永遠(yuǎn)不可能繞過(guò)它。
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><style type='text/css'>.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //這里透明化了input框，然后絕對(duì)定位在按鈕上了.btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}</style></head><body><button class='btn'>圖片</button><input type='file' accept='image/jpg,imgae/jpeg,image/png' onchange='insertimg(this);'><br><img src='http://www.leifengta.com.cn/bcjs/16354.html' alt=''><script language='javascript'>function insertimg(img){var rd=new FileReader();files=img.files[0];var filetype=files.type.slice(6,10);if(filetype!=’jpg’&&filetype!=’jpeg’&&filetype!=’png’){alert(’僅支持png,jpeg,jpg圖片格式’);return;}else{rd.readAsDataURL(files);rd.onloadend=function(e){document.getElementById(’img1’).src=e.target.result;document.getElementById(’img1’).style.width='300px';document.getElementById(’img1’).style.height='auto';};}}</script></body></html>
知識(shí)點(diǎn)補(bǔ)充:JS input file圖片上傳預(yù)覽效果
首先，可以先了解file 和FileReader 的API，在選取一個(gè)或者多個(gè)文件之后,訪(fǎng)問(wèn)到代表了所選文件的一個(gè)或多個(gè)File對(duì)象，這些對(duì)象被包含在一個(gè)FileList對(duì)象中。所有type屬性(attribute)為file的<input>元素都有一個(gè)files屬性，用來(lái)存儲(chǔ)用戶(hù)所選擇的文件。files有一個(gè)length屬性和item方法，我們可以通過(guò)files[index]或者files.item(index)獲取我們選擇的file對(duì)象。可以通過(guò)change事件監(jiān)聽(tīng)input file輸入完成事件。
html代碼：
<ul class='crgoods_uploadUl clearfix'> <li><img src='http://www.leifengta.com.cn/bcjs/img/product1.jpg'></li> <li><img src='http://www.leifengta.com.cn/bcjs/img/product1.jpg'></li> <li class='add'><i>+</i>最多20張<input type='file' οnchange='liUploadImg(this)'></li></ul>
js代碼：
//商品相冊(cè)圖片上傳預(yù)覽 function liUploadImg(file){ if (file.files && file.files[0]){ var reader = new FileReader(); reader.onload = function(evt){ // imgUpload.src = evt.target.result;$(’.crgoods_uploadUl li.add’).before(’<li><img src='http://www.leifengta.com.cn/bcjs/’+evt.target.result+’'></li>’); } reader.readAsDataURL(file.files[0]);}else{ var sFilter=’filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='http://www.leifengta.com.cn/bcjs/’; file.select(); var src = document.selection.createRange().text; imgUpload.filters.item(’DXImageTransform.Microsoft.AlphaImageLoader’).src = src;} }
另外，詳細(xì)API可以參考https://segmentfault.com/a/1190000006600936
示例如下：
到此這篇關(guān)于javascript input圖片上傳及預(yù)覽,FileReader預(yù)覽圖片的文章就介紹到這了,更多相關(guān)javascript文件上傳及預(yù)覽內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
網(wǎng)公網(wǎng)安備