带有图片预览功能的上传表单

最新推荐文章于 2025-05-31 22:01:17 发布

转载最新推荐文章于 2025-05-31 22:01:17 发布 · 1.4w 阅读

JS技巧同时被 3 个专栏收录

246 篇文章

订阅专栏

网页技巧

143 篇文章

订阅专栏

jQuery

129 篇文章

订阅专栏

本文介绍了一种实现图片上传即时预览的方法，并提供了多种样式的美化方案，适用于不同应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<script>
function viewmypic(mypic,upfile) {
if(upfile.files && upfile.files[0])
{
mypic.style.display="";
//火狐下，直接设img属性
//mypic.src = upfile.files[0].getAsDataURL();

 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
mypic.src = window.URL.createObjectURL(upfile.files[0]);
}
else
{
//IE下
if (upfile.value){
mypic.src=upfile.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>
</head>
<body>
<center>
<form >
<input name="upfile" type="file" id="upfile" size="40" onchange="viewmypic(showimg,this.form.upfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>

上传图片的时候，可以直观看图片是否正确

上传多个:

<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<script>
function viewmypic1(mypic,upfile1) {
if(upfile1.files && upfile1.files[0])
{
mypic.style.display="";
//火狐下，直接设img属性
//mypic.src = upfile1.files[0].getAsDataURL();

 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
mypic.src = window.URL.createObjectURL(upfile1.files[0]);
}
else
{
//IE下
if (upfile1.value){
mypic.src=upfile1.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>
<script>
function viewmypic2(mypic,upfile2) {
if(upfile2.files && upfile2.files[0])
{
mypic.style.display="";
//火狐下，直接设img属性
//mypic.src = upfile2.files[0].getAsDataURL();

 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
mypic.src = window.URL.createObjectURL(upfile2.files[0]);
}
else
{
//IE下
if (upfile2.value){
mypic.src=upfile2.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>
<script>
function viewmypic3(mypic,upfile3) {
if(upfile3.files && upfile3.files[0])
{
mypic.style.display="";
//火狐下，直接设img属性
//mypic.src = upfile3.files[0].getAsDataURL();

 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
mypic.src = window.URL.createObjectURL(upfile3.files[0]);
}
else
{
//IE下
if (upfile3.value){
mypic.src=upfile3.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>
</head>
<body>
<center>
<form >
<input name="upfile" type="file" id="upfile1" size="40" onchange="viewmypic1(showimg1,this.form.upfile1);" /><br>
<input name="upfile" type="file" id="upfile2" size="40" onchange="viewmypic2(showimg2,this.form.upfile2);" /><br>
<input name="upfile" type="file" id="upfile3" size="40" onchange="viewmypic3(showimg3,this.form.upfile3);" /><br>
</form>
<img name="showimg1" id="showimg1" src="" style="display:none;" alt="预览图片" /><br>
<img name="showimg2" id="showimg2" src="" style="display:none;" alt="预览图片" /><br>
<img name="showimg3" id="showimg3" src="" style="display:none;" alt="预览图片" /><br>
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>

css input[type=file] 样式美化(input上传文件样式 )

http://blog.csdn.net/haibo0668/article/details/78499576

美化input按钮多图片上传带预览图片功能

<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
    <style>
		/*样式1*/
		.a-upload {
			padding: 4px 10px;
			height: 20px;
			line-height: 20px;
			position: relative;
			cursor: pointer;
			color: #888;
			background: #fafafa;
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			display: inline-block;
			*display: inline;
			*zoom: 1
		}
		
		.a-upload  input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			cursor: pointer
		}
		
		.a-upload:hover {
			color: #444;
			background: #eee;
			border-color: #ccc;
			text-decoration: none
		}
		/*样式2*/
		.file {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
		}
		.file input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
		}
		.file:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}
    </style>
<script>
function viewmypic1(mypic,upfile1) {
if(upfile1.files && upfile1.files[0])
{
mypic.style.display="";
//火狐下，直接设img属性
//mypic.src = upfile1.files[0].getAsDataURL();

 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
mypic.src = window.URL.createObjectURL(upfile1.files[0]);
}
else
{
//IE下
if (upfile1.value){
mypic.src=upfile1.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>
<script>
function viewmypic2(mypic,upfile2) {
if(upfile2.files && upfile2.files[0])
{
mypic.style.display="";
//火狐下，直接设img属性
//mypic.src = upfile2.files[0].getAsDataURL();

 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
mypic.src = window.URL.createObjectURL(upfile2.files[0]);
}
else
{
//IE下
if (upfile2.value){
mypic.src=upfile2.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>

</head>
<body>
<center>
<form >
<a href="javascript:;" class="file"><input name="sfzfj[]" type="file" id="upfile1" size="40" onchange="viewmypic1(showimg1,this.form.upfile1);" />正面</a>
<a href="javascript:;" class="file"><input name="sfzfj[]" type="file" id="upfile2" size="40" onchange="viewmypic2(showimg2,this.form.upfile2);" />反面</a>
</form>
<img name="showimg1" id="showimg1" src="" style="display:none; width:20px" alt="预览图片" /><br>
<img name="showimg2" id="showimg2" src="" style="display:none;" alt="预览图片" /><br>
<img name="showimg3" id="showimg3" src="" style="display:none;" alt="预览图片" /><br>
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>