前言
本篇博客为转载,由于目前很多上传图片预览的插件都需要Java后台写方法先获取选择图片的接口,这个插件不需要。
下载插件地址
链接:https://pan.baidu.com/s/18QopJ7WGgOnyIryIb6_uBQ
提取码:tyo2
原作者博客地址
http://zhouxiang.decadework.com/article/1000
再次鸣谢该作者,如果作者不想我转载这篇博文,请告诉我,我会删除☺
改进插件有效性验证提示方式
原来的插件,当有效性验证失效时,是使用弹框验证。这里我修改成在图片下方用label显示报错信息,同时在Chrome内核下,重新点击选择文件但是不选择的时候,图片会消失而不是继续存在。
我的jsp文件:
<div class="form-group">
<label>上传图片<span class="star"></span></label>
<div id="imgdiv">
<img id="imgShow" width="260" height="260" />
</div>
</div>
<input type="file" id="up_img" name="logoUrl" class="form-control" value="" />
<div class="clearfix"></div>
我修改的js文件主要是_self.Bind方法里:
if (this.value) {
var $upImgBtn = $("#up_img");
$upImgBtn.next("label.error").remove(); //重新选择文件时清空报错信息
if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
//alert(_self.Setting.ErrMsg);
//清空图片
var $imgShow = $("#imgShow");
$imgShow.attr('src','');
//显示报错信息
$upImgBtn.after("<label class='error'>"+ _self.Setting.ErrMsg +"</label>");
$upImgBtn.val('');
this.value = "";
return false;
}
if (navigator.userAgent.indexOf("MSIE") > -1) {
由于使用了 $ 符号,所以需要引用jQuery.js。
注意
上述代码中的class是我项目中自己的css,你们可以改成自己的。
如:
.star {
color: red;
}