图片上传预览firefox和ie

最新推荐文章于 2021-06-07 12:02:49 发布

转载最新推荐文章于 2021-06-07 12:02:49 发布 · 391 阅读

Web前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种基于HTML和JavaScript实现的图片上传实时预览功能。通过文件输入控件和浏览器API，可以即时显示所选图片的缩略图，并支持调整预览尺寸。该方法适用于网页应用中需要用户预览上传图片的场景。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

	<script type="text/javascript">

function PreviewImg(imgFile,idname) {
  
	if (checkPic(idname) == true) {

		if (navigator.userAgent.indexOf("MSIE")>0) {
			var newPreview = document.getElementById("newPreview");
			newPreview.removeChild(document.getElementById("imgDiv"));
			var imgDiv = document.createElement("div");
			imgDiv.setAttribute("id", "imgDiv");
			document.body.appendChild(imgDiv);
			imgDiv.style.width = "150px";
			imgDiv.style.height = "150px";
			imgDiv.style.algin = "center";
			imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
			imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
			document.getElementById("imageUplaod").style.display = "none";
		}

		if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) {
			document.getElementById("imageUplaod").src = window.URL
					.createObjectURL(imgFile.files[0]); //火狐预览效果

		}

		newPreview.appendChild(imgDiv);

		newPreview.style.width = "150px";
		newPreview.style.height = "150px";
	}
}

function checkPic(idname) {
     alert(idname);
	var picPath = document.getElementById(""+idname+"").value;
	var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length)
			.toLowerCase();
	if (type == "jpg" || type == "bmp" || type == "gif" || type == "png") {

		return true;
	} else {
		alert("请上传正确的图片格式");
		return false;
	}
}
</script>
	<body>
		<p>
			图片上传：
			<input type="file" size="20" onchange="PreviewImg(this,'picPath');"
				id="picPath" />
		</p>
		宽度：
		<input type="text" size="13" id="imageWidth" />
		高度：
		<input type="text" size="13" id="imageHigh" />
		<br />
		<p>
			<div id="newPreview" style="margin: 0px auto;">
				<div id="imgDiv" style="display: none;"></div>
			</div>
			<img src="" width="150px" height="150px" id="imageUplaod"/>
			<br />
	</body>
</html>