卡卡網(wǎng)

本文介紹如何使用HTML5和JQuery實現(xiàn)上傳圖片預覽（多文件），對于單一圖片文件上傳預覽，可參考此前文章《圖片上傳之前用 jQuery FileReader() 顯示預覽圖的實例》。

多圖片上傳預覽

HTML5和JQuery實現(xiàn)多圖片上傳預覽

HTML標記

HTML標記由HTML FileUpload控件和DIV組成，DIV用于顯示多個圖像的實時預覽。

注意：對于HTML INPUT FileUpload控件，將html5 multiple屬性設置為multiple以允許選擇多個文件。

<input id="fileupload" type="file" multiple="multiple" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>

HTML5 FileReader API 實現(xiàn)圖片預覽

在jquery文檔事件處理程序中，一個change jquery事件處理程序已附加到HTML INPUT FileUpload控件。

當在FileUpload控件中選擇文件時，首先執(zhí)行檢查以確保瀏覽器支持HTML5 FileUpload API，如果它支持，則對HTML INPUT FileUpload控件中選擇的文件執(zhí)行jquery每個循環(huán)。

使用正則表達式驗證每個文件，以確保所選文件是有效的圖像文件。如果文件是有效的圖像文件，則使用HTML5 FileReader API的readAsDataURL方法將其讀取為base64字符串，并將其設置為動態(tài)圖像元素的源，該元素最終附加到HTML DIV dvPreview。

<script language="javascript" type="text/javascript">
$(function () {
  $("#fileupload").change(function () {
    if (typeof (FileReader) != "undefined") {
      var dvPreview = $("#dvPreview");
      dvPreview.html("");
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.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("style", "height:100px;width: 100px");
            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>

效果如圖：

多圖片上傳預覽

execcodegetcode

支持HTML5的瀏覽器，即Internet Explorer 10和11+，Mozilla FireFox，Google Chrome和Opera等，都可以使用HTML5 FileReader API顯示圖像預覽。

您可能對以下文章也感興趣

• 拖拽文件到瀏覽器上傳的方法【js插件dropzone.js】

標簽: FileReader  文件上傳  image  JQuery