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

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

http://www.jq22.com/jquery-info2757

Html 代码

  <div class="form-group row">
             <label class="col-lg-3 control-label">附加图片：</label>

             <div style="display: inline-block">
                 <div class="col-lg-9" id="imgdiv">
                     <img
                         src="<?= \yii\helpers\Url::toRoute('@web/' . $photo1) ?>"
                         style="width: 50px;height: 50px;cursor:pointer" id="imgShow">
                 </div>
                 <div style="display: none">
                     <input type="file" id="up_img" name="photo1"/>
                 </div>
             </div>
             <div <?= $photo2 == 'assets/Public/images/add.png' ? "style='display: none'" : "style='display: inline-block'";
             ?> id="two">
                 <div class="col-lg-9" id="imgdiv1">
                     <img src="<?= \yii\helpers\Url::toRoute('@web/' . $photo2) ?>"
                          style="width: 50px;height: 50px;cursor:pointer" id="imgShow1">
                 </div>
                 <div style="display: none">
                     <input type="file" id="up_img1" name="photo2"/>
                 </div>
             </div>
             <div <?= $photo3 == 'assets/Public/images/add.png' ? "style='display: none'" : "style='display: inline-block'";
             ?> id="three">
                 <div class="col-lg-9" id="imgdiv2">
                     <img src="<?= \yii\helpers\Url::toRoute('@web/' . $photo3) ?>"
                          style="width: 50px;height: 50px;cursor:pointer" id="imgShow2">
                 </div>
                 <div style="display: none">
                     <input type="file" id="up_img2" name="photo3"/>
                 </div>
             </div>
             <div style="display: inline-block">
                 <div class="col-lg-9" id="img-button">
                     <img id="img-upload" src="<?= \yii\helpers\Url::toRoute('@web/assets/Public/images/add.png') ?>"
                          style="width: 50px;height: 50px;cursor:pointer">
                     </img>
                 </div>
             </div>
         </div>

js 代码

    new uploadPreview({UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow"});
         new uploadPreview({UpBtn: "up_img1", DivShow: "imgdiv1", ImgShow: "imgShow1"});
         new uploadPreview({UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2"});
         // 第一张
         $("#imgShow").click(function () {

             $("#up_img").click();
         });
         $("#up_img").change(function () {

             $("#two").css({"display": 'inline-block'});
             $("#img-button").css({"display": 'none'});
         });
         //第二张
         $("#imgShow1").click(function () {

             $("#up_img1").click();
         });
         $("#up_img1").change(function () {

             $("#three").css({"display": 'inline-block'});
         });
         //第三张
         $("#imgShow2").click(function () {

             $("#up_img2").click();
         });
         //上传按钮
         //第三张
         $("#img-upload").click(function () {

             $("#up_img").click();
         });

图片上传及预览，无后台代码

页面引入：<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:选择文件后回调方法;