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:选择文件后回调方法;

上一篇:Python之路【第七篇续】:进程、线程、协程


下一篇:一篇文章让你彻底搞清楚Python中self的含义