图片上传本地预览(回显)插件

图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看
请下载完整的js和css样式,以及Demo

<html><title>文件上传</title><head><link rel="stylesheet" href="uploadPreview.css"><script src="uploadPreview.js"></script> <script>        window.onload=function(){ new uploadPreview({UpBtn : "up_img_zs",DivShow : "imgdiv_zh",ImgShow : "imgShow_zs"});new uploadPreview({UpBtn : "up_img_cp",DivShow : "imgdiv_cp",ImgShow : "imgShow_cp"});} </script></head><body><tr><td colspan="2"><div class="form-group"><label class="col-lg-3 control-label">证书图片：</label><div class="col-lg-9"><div id="imgdiv_zh" class="idiv"><img src="none.png" id="imgShow_zs" /></div><div class="file-box"><input type='button' class='btn  btn-success' value='浏览' id="" /><input type="file" name="zsPicter"  class="file"  id="up_img_zs" size="28"  /></div><div class="clearfix"></div></div></div></td></tr><tr><td colspan="2"><div class="form-group"><label class="col-lg-3 control-label">产品图片：</label><div class="col-lg-9"><div id="imgdiv_cp" class="idiv"><img src="none.png" id="imgShow_cp" /></div><div class="file-box"><input type='button' class='btn  btn-success' value='浏览' id="" /><input type="file" name="cpPicter"  class="file"  id="up_img_cp" size="28"  /></div><div class="clearfix"></div></div></div></td></tr></body>
</html>

做出来的效果图片展示

点击下载js+css以及完整的代码

图片上传本地预览(回显)插件相关推荐

js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
js实现网页图片上传本地预览
[实现效果] [相关代码] [HTML] <div id="preview"><div class="single_pic" id=" ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...

图片上传本地预览(回显)插件

图片上传本地预览(回显)插件相关推荐

最新文章

热门文章