js 图片上传前浏览

最新推荐文章于 2021-12-10 12:00:00 发布

君君大虾

最新推荐文章于 2021-12-10 12:00:00 发布

阅读量333

点赞数

分类专栏： js学习文章标签： js

本文链接：https://blog.csdn.net/wangjun5132/article/details/46275857

版权

js学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<title>Document</title>
	
	<script src="js/require.js" defer async="true" data-main="js/main2"></script>

	<script type="text/javascript">

	
	
	function pic(upload){
		var file = document.getElementById("up1");

		var browser_agent = navigator.userAgent;

		if (browser_agent.indexOf("Firefox")!=-1||browser_agent.indexOf("Chrome")!=-1) {

			var imgPath = window.URL.createObjectURL(upload.files[0]);
			var imgDiv = document.getElementById("localfile");
			imgDiv.src=imgPath;
			imgDiv.style.display="block";

 		    imgDiv.style.width="200px";
			imgDiv.style.height = "200px"
			
		}else{

			var Preview = document.getElementById('localfile');
                        Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
                        Preview.style.width = "200px";
                        Preview.style.height = "200px";	
                        Preview.style.display="block";
		}
	}

	</script>

</head>

<body>
	
<input type="file" class="upload" id="up1" οnchange="pic(this);">
<div id="tip"></div>
<img src="" alt="" id="localfile" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);display:none">

</body>
</html>

添加的一个jquery小插件，上传前预览的。 (IE下可能会有问题，还没解决好)

(function($) {
	$.fn.showUpPic = function(){
		fileBtn = this;
		this.on('change',function(){
		 var imgPath = window.URL.createObjectURL(fileBtn[0].files[0]);
		if(fileBtn.siblings('img')[0]!==undefined){
			fileBtn.siblings('img')[0].src = imgPath;
		}else{
			var img = document.createElement("img");
			 img.style.width="50px";
			 img.style.width="100px";
            img.src = imgPath;
            fileBtn[0].parentNode.appendChild(img);
		}
		});
	};	
})(jQuery);

君君大虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 图片上传前浏览

Document function pic(upload){ var file = document.getElementById("up1"); var browser_agent = navigator.userAgent; if (browser_agent.indexOf("Firefox")!=-1||browser_agent.indexOf(
复制链接

扫一扫