Java web图片上传本地预览,无需后台写接口

前言

本篇博客为转载，由于目前很多上传图片预览的插件都需要Java后台写方法先获取选择图片的接口，这个插件不需要。

下载插件地址

http://jquery.decadework.com/

原作者博客地址

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;
}