- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- javascript input圖片上傳及預覽,FileReader預覽圖片
FileReader是前端進(jìn)行文件處理的一個(gè)重要的Api，特別是在對圖片的處理上，如果你想知道圖片的處理原理，你就永遠不可能繞過(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框，然后絕對定位在按鈕上了
.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" id="file" accept="image/jpg,imgae/jpeg,image/png" class="file-ipt" onchange="insertimg(this);"><br>
<img src="" id="img1" 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>
知識點(diǎn)補充:JS input file圖片上傳預覽效果
首先，可以先了解file 和FileReader 的API，在選取一個(gè)或者多個(gè)文件之后,訪(fǎng)問(wèn)到代表了所選文件的一個(gè)或多個(gè)File對象，這些對象被包含在一個(gè)FileList對象中。所有type屬性(attribute)為file的<input>元素都有一個(gè)files屬性，用來(lái)存儲用戶(hù)所選擇的文件。files有一個(gè)length屬性和item方法，我們可以通過(guò)files[index]或者files.item(index)獲取我們選擇的file對象?？梢酝ㄟ^(guò)change事件監聽(tīng)input file輸入完成事件。
html代碼：
<ul class="crgoods_uploadUl clearfix">
<li><img src="img/product1.jpg"></li>
<li><img src="img/product1.jpg"></li>
<li class="add"><i>+</i>最多20張<input type="file" class="liAdd_flie" οnchange="liUploadImg(this)"></li>
</ul>
js代碼：
//商品相冊圖片上傳預覽
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="'+evt.target.result+'"></li>');
}
reader.readAsDataURL(file.files[0]);
}else{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
}
}
另外，詳細API可以參考
示例如下：
到此這篇關(guān)于javascript input圖片上傳及預覽,FileReader預覽圖片的文章就介紹到這了,更多相關(guān)javascript文件上傳及預覽內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
