javascript input圖片上傳及預覽,FileReader預覽圖片
阿新 • • 發佈：2021-06-24
FileReader是前端進行檔案處理的一個重要的Api，特別是在對圖片的處理上，如果你想知道圖片的處理原理，你就永遠不可能繞過它。
<!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="javascript input圖片上傳及預覽,FileReader預覽圖片"> <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>
知識點補充:js input www.cppcns.comfile圖片上傳預覽效果
首程式設計客棧先，可以先了解file 和FileReader的API，在選取一個或者多個檔案之後,訪問到代表了所選檔案的一個或多個File物件，這些物件被包含程式設計客棧在一個FileList物件中。所有type屬性(attribute)為file的<input>元素都有一個files屬性，用來儲存使用者所選擇的檔案。files有一個length屬性和item方法，我們可以通過files[index]或者files.item(index)獲取我們選擇的file物件。可以通過change事件監聽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 = fuwww.cppcns.comnction(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可以參考https://segmentfault.com/a/1190000006600936
示例如下：
到此這篇關於javascript input圖片上傳及預覽,FileReader預覽圖片的文章就介紹到這了,更多相關javascript檔案上傳及預覽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！