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