快捷導(dǎo)航

javascript input圖片上傳及預(yù)覽,FileReader預(yù)覽圖片

更新時間：2021年06月22日 11:04:42 作者：cdcdhj

本文放置了html完成代碼案例,有需要大家可以直接復(fù)制測試功能,采用input文本框圖片上傳,使用FileReader預(yù)覽圖片效果

FileReader是前端進(jìn)行文件處理的一個重要的Api，特別是在對圖片的處理上，如果你想知道圖片的處理原理，你就永遠(yuǎn)不可能繞過它。

<!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)補(bǔ)充:JS input file圖片上傳預(yù)覽效果

首先，可以先了解file 和FileReader 的API，在選取一個或者多個文件之后,訪問到代表了所選文件的一個或多個File對象，這些對象被包含在一個FileList對象中。所有type屬性(attribute)為file的<input>元素都有一個files屬性，用來存儲用戶所選擇的文件。files有一個length屬性和item方法，我們可以通過files[index]或者files.item(index)獲取我們選擇的file對象?？梢酝ㄟ^change事件監(jiān)聽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代碼：

//商品相冊圖片上傳預(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="'+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;
        }
    }

另外，詳細(xì)API可以參考https://segmentfault.com/a/1190000006600936

示例如下：

到此這篇關(guān)于javascript input圖片上傳及預(yù)覽,FileReader預(yù)覽圖片的文章就介紹到這了,更多相關(guān)javascript文件上傳及預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: