卡卡網(wǎng)

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

多圖片上傳預(yù)覽

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

HTML標(biāo)記

HTML標(biāo)記由HTML FileUpload控件和DIV組成，DIV用于顯示多個(gè)圖像的實(shí)時(shí)預(yù)覽。

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

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

HTML5 FileReader API 實(shí)現(xiàn)圖片預(yù)覽

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

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

使用正則表達(dá)式驗(yàn)證每個(gè)文件，以確保所選文件是有效的圖像文件。如果文件是有效的圖像文件，則使用HTML5 FileReader API的readAsDataURL方法將其讀取為base64字符串，并將其設(shè)置為動(dòng)態(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>

效果如圖：

多圖片上傳預(yù)覽

execcodegetcode

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

您可能對(duì)以下文章也感興趣

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

標(biāo)簽: FileReader  文件上傳  image  JQuery