带有图片预览功能的上传表单
程序员文章站
2022-04-08 16:48:23
...
input上传文件 一次多个:multiple=“multiple”
使用 accept 属性设置接收的类型,如:
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
<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>
上一篇: 哪些跳绳方式能减肥 最有效的减肥方式介绍
推荐阅读
-
AngularJs上传前预览图片的实例代码
-
详解nodejs实现本地上传图片并预览功能(express4.0+)
-
如何用input标签和jquery实现多图片的上传和回显功能
-
laravel5.5框架的上传图片功能实例分析【仅传到服务器端】
-
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
-
JS实现上传图片的三种方法并实现预览图片功能
-
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
-
jQuery实现图片上传预览效果功能完整实例【测试可用】
-
node.js中实现kindEditor图片上传功能的方法教程
-
ASP上传图片功能的又一实现(OLE对象)