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 中，實現上傳顯示縮略圖。

 

作者：EricHedgedog
鏈接：http://www.jianshu.com/p/8eaa56a37064