這篇文章主要介紹了使用Html5怎么實(shí)現(xiàn)單張、多張圖片上傳功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為龍馬潭企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，龍馬潭網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

前言

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

2|0實(shí)現(xiàn)

2|1前端部分

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

<div class="form-group form-row">
        <label class="col-sm-2 control-label uText">俱樂(lè)部相冊(cè)</label><div class="row">
                        <div class="col-xs-10 col-sm-8 mTop5">
                            <label title="上傳俱樂(lè)部相冊(cè)" 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ū)域是用于圖片預(yù)覽的

<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樣式部分

什么？連樣式你都要看，還有沒(méi)有人性(苦笑臉)

2|3Js部分

首先我們分析下上面的html，我們用一個(gè)label把input和一個(gè)img標(biāo)簽包起來(lái)了，我們希望點(diǎn)擊效果圖那個(gè)+號(hào)圖片，就能彈出選擇相片的對(duì)話框，所以，我們需要先給label來(lái)一個(gè)點(diǎn)擊事件：

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

接著我們?cè)倏矗驗(yàn)槲覀兪且@取上傳的文件，而我們的文件主要是在input上，所以，我們先將input標(biāo)簽獲取到：

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

我們將當(dāng)前input元素標(biāo)簽打印出來(lái)看看是個(gè)什么東東

我們展開(kāi)第一項(xiàng)會(huì)發(fā)現(xiàn)files里面length長(zhǎng)度是0

好，我們繼續(xù)分析，因?yàn)槲覀兿胍墚?dāng)input框改變的時(shí)候，說(shuō)簡(jiǎn)單點(diǎn) 就是有選擇到文件的時(shí)候，我們能獲取到當(dāng)前選擇的文件，這個(gè)和獲取input框文字輸入是一樣的道理，所以，經(jīng)過(guò)分析，我們知道需要給input標(biāo)簽加一個(gè)change事件：

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

讓我們來(lái)瞄一眼，獲取到改變后的input元素里面有些啥東東：

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

接著往下看，通過(guò)打印輸出我們可以看到，我們?cè)賗nput 標(biāo)簽的files元素上已經(jīng)拿到了我們想要的文件信息，我們只需要獲取它們就行了：

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

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

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

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

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

有必要延伸下FileReader的知識(shí)點(diǎn)：

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

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

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

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

我們將其this.result打印出來(lái)看看是個(gè)什么東東:

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

fileReader.readAsDataURL(value);

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

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

然后我們追加的刪除圖片，也需要給其點(diǎn)擊事件，讓我們的當(dāng)前預(yù)覽區(qū)域消失：

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

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

 $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("格式錯(cuò)誤<br/>請(qǐng)選擇一個(gè)圖片文件");
                            }
                        });
                });
            $input.removeAttr("id");
            var newInput =
                '<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">';
            $(this).append($(newInput));
        });

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“使用Html5怎么實(shí)現(xiàn)單張、多張圖片上傳功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

分享文章：使用Html5怎么實(shí)現(xiàn)單張、多張圖片上傳功能
路徑分享：http://jinyejixie.com/article28/gcshjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站改版、自適應(yīng)網(wǎng)站、微信小程序、網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)