html5 + jq 实现图片上传预览，兼容主流浏览器

最新推荐文章于 2024-06-29 16:04:34 发布

karenYin0828

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量5.6k

点赞数

分类专栏： html5 文章标签： html5.图片预览兼容主流浏览器

本文链接：https://blog.csdn.net/yinkaihui/article/details/51214215

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="font-family:Microsoft YaHei;font-size:12px;">
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片上传预览</title>
</head>
<body>
	
	<div class="content" style="width: 300px;height: 50px;margin: 50px auto 0;position: relative;">
		<form method="" action="" id="upload">
			<div style="width: 300px;opacity: 0;z-index: 999;position: absolute;">
				<input type="file" id="selectImg" value=""></input>
				<input type="hidden" name="imgId"></input>
			</div>
		</form>
		<div class="cover" style="z-index: 99;opacity:1;">
			<input type="button" id="chooseImg" value="选择图片" style="background: #e8e8e8;border: 1px solid #a8a8a8;height: 30px;"></input>
		</div>
	</div>
	<div id="previewDiv" style="width: 300px;height: 200px;margin: 0 auto;border: 1px solid #a8a8a8;text-align: center;color: #d8d8d8;" >
		<img src="" alt="将在这里预览图片" id="previewImg" style="max-width: 150px;max-height: 200px;">
		<!--进度条-->
		<div id="progress" style="color: black"></div>
	</div>
	<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		function preview(imgobj,previewImgId,previewDivId){
			var accept = /^(.+)\.(jpg||jpeg||png||gif)$/g;
			var browserVersion = window.navigator.userAgent.toLowerCase();
			if (accept.test(imgobj.value)) {
				//上传为可接受图片格式
				if(imgobj.files){
					//上传了图片文件
					if (window.FileReader) {//html5实现文件上传,兼容ie10及以上 chrome，ff7+
						var reader = new FileReader();
						reader.onload = function(){
							$("#previewImg").attr("src",this.result);
						}
						reader.readAsDataURL(imgobj.files[0]);
						//将文件以data：url形式读取，写入到result属性中，没有返回值
						// reader.onprogress = function(e) { 
						//  document.getElementById("progress").textContent = (e.loaded/imgobj.files[0].size).toFixed(2)*100+"%"; 
						//  }
					}
				}
				else if(browserVersion.indexOf("firefox")>-1){
					//不支持html5；兼容低版本火狐浏览器
					$("#previewImg").attr("src",imgobj.files[0].getAsDataURL());

				}
				else if (browserVersion.indexOf("msie") > -1) {
					//ie浏览器
					if (browserVersion.indexOf("msie 6") > -1) {
						//兼容ie6
						$("#previewImg").attr("src",imgobj.value);
					}
					else{
						//ie[7-9]因为该版本浏览器处于安全性考虑，屏蔽了上传文件的真是本地地址，使用以下获取真实地址
						//在ie中使用滤镜进行预览图片，
						imgobj.select();
						if (browserVersion.indexOf("msie 9") > -1) {
							//ie9中必须将焦点从文本域移开，否则拒绝document.selection.createRange().text
							$("#previewImg").focus();
							//如果上传控件在框架中，imgobj.blur并不能达到目的，所以可以将任意元素聚焦来达到目的。
						}
						// var a = document.selection.createRange().text;
						//在测试的时候有点小bug，这部分我在想一下！
					}
				}
				else {
				document.getElementById(previewImgId).setAttribute("src", imgobj.value);
				}
			}
			else{
				alert("图片格式不符合，请选择jpg/png/gif/jpeg格式的图片");
				imgobj.value = ""; //清空选中文件
				if (browserVersion.indexOf("msie") > -1) {//兼容ie9及以下浏览器
					imgobj.select();
					document.selection.clear();
				}
			}
		}

		$("#chooseImg").click(function(){
			$("#selectImg").click().select();
		})
		$("#selectImg").change(function(){
			preview(this,$("#previewImg"),"previewDiv");
		})
	</script>
</body>
</html></span>

用到的web api详细可看这篇文章点击打开链接

karenYin0828

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 + jq 实现图片上传预览，兼容主流浏览器

图片上传预览 function preview(imgobj,previewImgId,previewDivId){ var accept = /^(.+)\.(jpg||jpeg||png||gif)$/g; var browserVersion = window
复制链接

扫一扫

专栏目录