最近做一套手機(jī)商城頁面，在退款申請(qǐng)頁面有上傳圖片顯示縮略圖的功能，以前沒有做過這個(gè)，所以整理了一下。

首先 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設(shè)為了透明色
.upload-img input {
  height: 50px;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  right: 0;
}

在這里我把上傳按鈕input變成了透明色，然后用一個(gè)設(shè)置了+號(hào)背景圖的span蓋在上面實(shí)現(xiàn)了上傳按鈕的樣式改變，如不用圖片也可以自行設(shè)置span樣式來達(dá)到想要的效果。

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 綁定了一個(gè) change() 事件，當(dāng)事件被觸發(fā)后，首先會(huì)檢測該瀏覽器是否支持 HTML5 FileReader API ,如果支持就會(huì)執(zhí)行一個(gè) each 循環(huán)。
在每一個(gè)循環(huán)里，用正則表達(dá)式判斷文件后綴名是否為圖片格式，如果是圖片格式，如果是圖片，就會(huì)用 readAsDataURL 方法來讀取其 BASE64編碼，然后以其為img元素的 src 屬性值，添加 img 元素到 #imgPreview 中，實(shí)現(xiàn)上傳顯示縮略圖。

123.jpg