uploadPreview 兼容多浏览器图片上传及预览插件使用

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="<?= \yii\helpers\Url::toRoute('@web/' . $photo1) ?>"
 8                         style="width: 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="<?= \yii\helpers\Url::toRoute('@web/' . $photo2) ?>"
18                          style="width: 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="<?= \yii\helpers\Url::toRoute('@web/' . $photo3) ?>"
28                          style="width: 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="<?= \yii\helpers\Url::toRoute('@web/assets/Public/images/add.png') ?>"
37                          style="width: 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:选择文件后回调方法;

posted @ 2016-10-26 14:40  哦先生  阅读(4055)  评论(0)  编辑  收藏  举报