uploadPreview兼容多浏览器图片上传及预览插件
http://www.jq22.com/jquery-info2757
Html 代码
1 <div class="form-group row"> 2 <label class="col-lg-3 control-label">附加图片：</label> 3 4 <div style="display: inline-block"> 5 <div class="col-lg-9" id="imgdiv"> 6 <img 7 src="<?= yiihelpersUrl::toRoute('@web/' . $photo1) ?>" 8 style=" 50px;height: 50px;cursor:pointer" id="imgShow"> 9 </div> 10 <div style="display: none"> 11 <input type="file" id="up_img" name="photo1"/> 12 </div> 13 </div> 14 <div <?= $photo2 == 'assets/Public/images/add.png' ? "style='display: none'" : "style='display: inline-block'"; 15 ?> id="two"> 16 <div class="col-lg-9" id="imgdiv1"> 17 <img src="<?= yiihelpersUrl::toRoute('@web/' . $photo2) ?>" 18 style=" 50px;height: 50px;cursor:pointer" id="imgShow1"> 19 </div> 20 <div style="display: none"> 21 <input type="file" id="up_img1" name="photo2"/> 22 </div> 23 </div> 24 <div <?= $photo3 == 'assets/Public/images/add.png' ? "style='display: none'" : "style='display: inline-block'"; 25 ?> id="three"> 26 <div class="col-lg-9" id="imgdiv2"> 27 <img src="<?= yiihelpersUrl::toRoute('@web/' . $photo3) ?>" 28 style=" 50px;height: 50px;cursor:pointer" id="imgShow2"> 29 </div> 30 <div style="display: none"> 31 <input type="file" id="up_img2" name="photo3"/> 32 </div> 33 </div> 34 <div style="display: inline-block"> 35 <div class="col-lg-9" id="img-button"> 36 <img id="img-upload" src="<?= yiihelpersUrl::toRoute('@web/assets/Public/images/add.png') ?>" 37 style=" 50px;height: 50px;cursor:pointer"> 38 </img> 39 </div> 40 </div> 41 </div>
js 代码
1 new uploadPreview({UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow"}); 2 new uploadPreview({UpBtn: "up_img1", DivShow: "imgdiv1", ImgShow: "imgShow1"}); 3 new uploadPreview({UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2"}); 4 // 第一张 5 $("#imgShow").click(function () { 6 7 $("#up_img").click(); 8 }); 9 $("#up_img").change(function () { 10 11 $("#two").css({"display": 'inline-block'}); 12 $("#img-button").css({"display": 'none'}); 13 }); 14 //第二张 15 $("#imgShow1").click(function () { 16 17 $("#up_img1").click(); 18 }); 19 $("#up_img1").change(function () { 20 21 $("#three").css({"display": 'inline-block'}); 22 }); 23 //第三张 24 $("#imgShow2").click(function () { 25 26 $("#up_img2").click(); 27 }); 28 //上传按钮 29 //第三张 30 $("#img-upload").click(function () { 31 32 $("#up_img").click(); 33 });
图片上传及预览，无后台代码
页面引入：<script src="uploadPreview.js" type="text/javascript"></script>
使用方法:
界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)
<div id="imgdiv"><img id="imgShow" width="120" height="120" ;/></div>
<input type="file" id="up_img" />
调用代码:
new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
参数说明:
-
UpBtn:选择文件控件ID;
-
DivShow:DIV控件ID;
-
ImgShow:图片控件ID;
-
Width:预览宽度;
-
Height:预览高度;
-
ImgType:支持文件类型 格式:["jpg","png"];
-
callback:选择文件后回调方法;