主頁 > 知識庫 > Html5實現(xiàn)單張、多張圖片上傳功能

Html5實現(xiàn)單張、多張圖片上傳功能

熱門標簽:洛陽市伊川縣地圖標注中心官網(wǎng) 電銷機器人視頻 標準智能外呼系統(tǒng) 江蘇高頻外呼系統(tǒng)線路 平頂山電子地圖標注怎么修改 會聲會影怎樣做地圖標注效果 地圖標注自己去過的地方 高德地圖標注錯誤怎么修改 搜狗星級酒店地圖標注

前言

今天我們聊一聊圖片上傳,單張Or多張 ,如今,各大圖片上傳插件數(shù)不勝數(shù),例如:Jquery的 verupload.js,jQuery File Upload、Uploadify、jQuery.filter等等。But。上面說到的這些插件,今天我們不談,我們來看一看使用HTML5中的FileReader 如何實現(xiàn) 圖片的單張及多張預覽、刪除、上傳等功能。先看下實現(xiàn)后的效果如下:

2|0實現(xiàn)

2|1前端部分

這塊是用戶點擊按鈕 其中我們最重要的一句話是input type=file 和給了一個multiple屬性,可以滿足多張圖片上傳

<div class="form-group form-row">
        <label class="col-sm-2 control-label uText">俱樂部相冊</label><div class="row">
                        <div class="col-xs-10 col-sm-8 mTop5">
                            <label title="上傳俱樂部相冊" for="ClubImagesUpload" id="btnClubImg" class="col-sm-2">
                                <input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">
                                <img src="/Images/registerNewSite/btn_addimg.png" class="addImg"/>
                            </label>
                        </div>
                    </div></div>

下面這塊區(qū)域是用于圖片預覽的

<div class="form-group form-row" id="preViewMore"><div class="row">
      <div class="col-xs-9">
         <div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm"></div>
       </div>
  </div></div>

2|2樣式部分

什么?連樣式你都要看,還有沒有人性(苦笑臉)

2|3Js部分

首先我們分析下上面的html,我們用一個label把input和一個img標簽包起來了,我們希望點擊效果圖那個+號圖片,就能彈出選擇相片的對話框,所以,我們需要先給label來一個點擊事件:

$("#btnClubImg").click(function() {
    //TODO Something
});

接著我們再看,因為我們是要獲取上傳的文件,而我們的文件主要是在input上,所以,我們先將input標簽獲取到:

$("#btnClubImg").click(function() {
      var $input = $("#ClubImagesUpload");
     console.log($input);//打印當前元素
});

我們將當前input元素標簽打印出來看看是個什么東東

我們展開第一項會發(fā)現(xiàn)files里面length長度是0

好,我們繼續(xù)分析,因為我們想要能當input框改變的時候,說簡單點 就是有選擇到文件的時候,我們能獲取到當前選擇的文件,這個和獲取input框文字輸入是一樣的道理,所以,經(jīng)過分析,我們知道需要給input標簽加一個change事件:

 $("#btnClubImg").click(function() {
      var $input = $("#ClubImagesUpload");
      console.log($input);
      $input.on("change", function () {
         console.log(this);//打印改變后的當前元素
  });
});   

讓我們來瞄一眼,獲取到改變后的input元素里面有些啥東東:

這里很清楚得可以看到,我們獲取到了選擇的圖片,包括有最后修改事件,圖片名稱,大小以及圖片類型(有了文件類型,我們就可以判斷當前用戶選擇的是否是圖片不是嗎(斜眼笑)) 同樣,這是單個文件的, 如果是多個文件,就會有多個file

接著往下看,通過打印輸出我們可以看到,我們再input 標簽的files元素上已經(jīng)拿到了我們想要的文件信息,我們只需要獲取它們就行了:

 var files = this.files;
 var length = files.length;

這樣,我們就可以獲取到所有文件,以及文件的個數(shù),那這里問題來了,我們?nèi)绻沁x擇多個文件,如果將其依次輸出并展示到頁面上呢?看到上面標注的四個字,腦袋中有沒有閃現(xiàn)出兩個字呢?循環(huán)

 $.each(files, function (key, value) {
        //TOTO Something
  });

通過將上面得到的files 循環(huán),我們可以依次得到每個文件的信息。這樣,你就不僅可以將其依次輸出,如果你愿意,你還可以將其送上天~

var fileReader = new FileReader();//實例化一個FileReader對象
var file_ = files[key];//獲取當前文件
if (/^image\/\w+$/.test(file_.type)) {//將當前文件進行正則匹配,看是否是選擇的圖片
      fileReader.onload = function() {//當讀取操作完成時調(diào)用
       }         
} 

有必要延伸下FileReader的知識點:

FileReader主要用于將文件內(nèi)容讀入內(nèi)存,通過一系列異步接口,可以在主線程中訪問本地文件。

使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù)。

回到主題,我們已經(jīng)能夠得到文件并且得到返回,所以此時,我們只需要展示返回的結(jié)果就行了

$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");

我們將其this.result打印出來看看是個什么東東:

不言而喻,是將圖片轉(zhuǎn)換成了Base64的數(shù)據(jù)格式。最后,我們調(diào)用 readAsDataURL 讀取文件內(nèi)容,將其用data:url字符串表示出來

fileReader.readAsDataURL(value);

這樣,你就可以得到一個簡易的圖片上傳的Demo了,但是并不是最終的,因為你還需要加很多業(yè)務(wù)進去。比如:得到一張預覽圖片后,當前標簽會被占用,如果下次循環(huán)進來,直接使用原標簽,肯定會將之前的圖片替換,那這肯定不是我們想要的效果,我們希望是能依次展示,而不是替換展示。所以,我們還需要做一些處理:

 $("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");
//使用apend再當前元素下追加一個子節(jié)點
 $("#clubInputImagePreview") .append("<img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage'  id='ImgRemove' />");
//使用after 向當前兄弟節(jié)點 追加一個同級節(jié)點                                       
$("#clubInputImagePreview").after( "<div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg' ></div>");

然后我們追加的刪除圖片,也需要給其點擊事件,讓我們的當前預覽區(qū)域消失:

$("#ImgRemove").click(function () {
          $(this).parent().remove();
});

最后,你會發(fā)現(xiàn)結(jié)果還不是我們想要的,那是因為 當前ID還在,所以無法進行下一步操作,而我們只需要將當前元素的Id Remove掉,然后新增一個同ID的元素,這樣瀏覽器就會認為這是一個新的元素:

 $input.removeAttr("id");
 var newInput ='<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">';
 $(this).append($(newInput));

最后完整JS代碼如下:

  var intP = 0;
        $("#btnClubImg").click(function() {
            var $input = $("#ClubImagesUpload");
//            console.log($input);
            $input.on("change",
                function () {
//                    console.log(this);
                    var files = this.files;
                    var length = files.length;
                    if (intP > 8) {
                        layer.msg('圖片不能再多了~', {});
                        return;
                    }
                    $.each(files,
                        function (key, value) {
                            var fileReader = new FileReader();
                            var file_ = files[key];
                            if (/^image\/\w+$/.test(file_.type)) {
                                fileReader.onload = function() {
                                    if (intP > 8) {
                                        layer.msg('圖片不能再多了~', {});
                                        return;
                                    }
                                    if (key == 0 && intP == 0) {
                                        console.log(this.result);
                                        $("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");
                                        $("#clubInputImagePreview")
                                            .append(
                                            "<img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage'  id='ImgRemove' />");
                                        $("#clubInputImagePreview").after(
                                            "<div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div>");
                                    } else {
                                        $("#clubInputImagePreview" + parseInt(intP) + "").css("background-image",
                                            "url(" + this.result + ")");
                                        $("#clubInputImagePreview" + parseInt(intP) + "").append(
                                            "<img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage'  id='ImgRemove" +
                                            parseInt(parseInt(1) + parseInt(intP)) +"' />");
                                        $("#clubInputImagePreview" + parseInt(intP) + "").after(
                                            "<div id='clubInputImagePreview" +
                                            parseInt(parseInt(1) + parseInt(intP)) +
                                            "'class='col-sm-9 img-preview img-preview-sm delImg' ></div>");
                                    }
                                    if (key == 0 && intP == 0) {
                                        $("#ImgRemove").click(function () {
                                            $(this).parent().remove();
                                        });
                                    } else {
                                        $("#ImgRemove" + parseInt(parseInt(1) + parseInt(intP)) + "").click(function () {
                                            $(this).parent().remove();
                                        });
                                    }
                                    intP += parseInt(1);
                                };
                                fileReader.readAsDataURL(value);
                            } else {
                                layer.msg("格式錯誤<br/>請選擇一個圖片文件");
                            }
                        });
                });
            $input.removeAttr("id");
            var newInput =
                '<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">';
            $(this).append($(newInput));
        });

總結(jié)

以上所述是小編給大家介紹的Html5實現(xiàn)單張、多張圖片上傳功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

標簽:松原 鄂爾多斯 廣東 廣西 阿克蘇 蚌埠 常德 果洛

巨人網(wǎng)絡(luò)通訊聲明:本文標題《Html5實現(xiàn)單張、多張圖片上傳功能》,本文關(guān)鍵詞  Html5,實現(xiàn),單張,多張,圖片,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Html5實現(xiàn)單張、多張圖片上傳功能》相關(guān)的同類信息!
  • 本頁收集關(guān)于Html5實現(xiàn)單張、多張圖片上傳功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章