JQuery实现input上传图片显示缩略图

最近做一套手机商城页面，在退款申请页面有上传图片显示缩略图的功能，以前没有做过这个，所以整理了一下。

首先 HTML ：

<p>上传图片：</p>
  <div id="imgPreview"></div>
  <span class="upload-img"><input id="fileUpload" accept="image/*" type="file" multiple="multiple"></span>
  </div>

CSS ：

#imgPreview {
  float: left;
  border: none;
}
#imgPreview img {
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
upload-img {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: url("../images/self/upload.png") no-repeat 0;
  background-size: contain;
}
//这儿是为了改变上传按钮样式把input设为了透明色
.upload-img input {
  height: 50px;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  right: 0;
}

在这里我把上传按钮input变成了透明色，然后用一个设置了+号背景图的span盖在上面实现了上传按钮的样式改变，如不用图片也可以自行设置span样式来达到想要的效果。

JQuery ：

<script type="text/javascript">
$(function () {
$("#fileupload").change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("#imgPreview");
dvPreview.html("");
var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
    var file = $(this);
    if (regex.test(file[0].name.toLowerCase())) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var img = $("<img />");
            img.attr("src", e.target.result);
            dvPreview.append(img);
        }
        reader.readAsDataURL(file[0]);
    } else {
        alert(file[0].name + " is not a valid image file.");
        dvPreview.html("");
        return false;
    }
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
});

</script>

给 input 绑定了一个 change() 事件，当事件被触发后，首先会检测该浏览器是否支持 HTML5 FileReader API ,如果支持就会执行一个 each 循环。
在每一个循环里，用正则表达式判断文件后缀名是否为图片格式，如果是图片格式，如果是图片，就会用 readAsDataURL 方法来读取其 BASE64编码，然后以其为img元素的 src 属性值，添加 img 元素到 #imgPreview 中，实现上传显示缩略图。