最近做一套手机商城页面，在退款申请页面有上传图片显示缩略图的功能，以前没有做过这个，所以整理了一下。
首先 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 中，实现上传显示缩略图。
123.jpg
