如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯功能

更新時(shí)間：2018年05月16日 09:37:34 作者：奇跡迪

本文通過(guò)圖文并茂的形式給大家介紹了如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯功能,需要的朋友可以參考下

本文主要記錄如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯，不會(huì)涉及后端的交互，大概的效果看圖

效果圖

我們從零來(lái)做一個(gè)這樣的demo

第一步：

我們先完善一下我們的頁(yè)面，默認(rèn)的input-file標(biāo)簽非常丑，我們美化一下它，不會(huì)的可以百度一下，就是外面套個(gè)盒子，設(shè)置input的opacity為0，然后外面的盒子設(shè)計(jì)成我們喜歡的樣式即可，我就隨便做了一下。

大概的樣式

還是放一下源碼，只談效果

這是body

<body>
  <div class="uploadImgBtn" id="uploadImgBtn">
    <input class="uploadImg" type="file" name="file" multiple id="file">
  </div>
</body>

這是css的樣式

.uploadImgBtn {

    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    background: url("img/plus.png") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }

  .uploadImgBtn .uploadImg {
    position: absolute;
    right: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  //這是一個(gè)用做回顯的盒子的樣式
  .pic{
    width: 100px;
    height: 100px;
  }
  .pic img {
    width: 100%;
    height: 100%;
  }

代碼的量并沒(méi)有多少，接下來(lái)我們就分析一下如何讓圖片回顯；我知道有兩種方式，一種是先上傳到服務(wù)器，并返回該圖片的url，然后渲染在頁(yè)面中；另一種呢，是利用h5的FileReader對(duì)象直接在本地預(yù)覽圖片，用戶(hù)確認(rèn)后再上傳服務(wù)器。

我們是采用第二種形式，既然知道了思路那就開(kāi)始編程吧

<script>
  $(document).ready(function(){
    //為外面的盒子綁定一個(gè)點(diǎn)擊事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先獲取input標(biāo)簽
      2、給input標(biāo)簽綁定change事件
      3、把圖片回顯
       */
//      1、先回去input標(biāo)簽
      var $input = $("#file");
//      2、給input標(biāo)簽綁定change事件
      $input.on("change" , function(){
        //補(bǔ)充說(shuō)明：因?yàn)槲覀兘oinput標(biāo)簽設(shè)置multiple屬性，因此一次可以上傳多個(gè)文件
        //獲取選擇圖片的個(gè)數(shù)
        var files = this.files;
        var length = files.length;
        console.log("選擇了"+length+"張圖片");
        //3、回顯
        for( var i = 0 ; i < length ; i++ ){
          var fr = new FileReader(),
            div = document.createElement("div"),
            img = document.createElement("img");
          div.className = 'pic';
          fr.onload = function(e){
            console.log("回顯了圖片")
            img.src = this.result;
            div.appendChild(img)
            document.body.appendChild(div);
          }
          fr.readAsDataURL(files[i]);//讀取文件
        }
      })
    })
  })
</script>

代碼的思路也可以說(shuō)是很簡(jiǎn)單，先給外面的盒子綁定點(diǎn)擊事件，然后獲取input標(biāo)簽，給input標(biāo)簽綁定change事件，然后用一個(gè)for循環(huán)把獲得的數(shù)據(jù)回顯出來(lái)，for循環(huán)里有一個(gè)異步事件onload是用來(lái)渲染圖片，來(lái)我們看看效果圖

效果圖

我們選擇了三張圖片，卻顯示了一張，話(huà)說(shuō)我們?cè)趂or循環(huán)里創(chuàng)建了三個(gè)div和img卻只顯示了一張圖片，這里面肯定有蹊蹺。

我們來(lái)仔細(xì)分析一下，前面我已經(jīng)說(shuō)了，回顯的for循環(huán)里面有一個(gè)異步事件，既然是異步的，可能for循環(huán)執(zhí)行完了，才執(zhí)行onload事件使我們?cè)O(shè)置的下標(biāo)i值和預(yù)期的結(jié)果不一致；那我們?nèi)绾谓鉀Q呢，如果我們能形成一個(gè)函數(shù)作用域，在里面每次回顯一張圖片，我覺(jué)得我們就可能解決了。我們來(lái)嘗試一下，我們前端可以使用jquery的each方案，它自帶回調(diào)函數(shù)，形成了函數(shù)作用域。我們看一下代碼

<script>
  $(document).ready(function(){
    //為外面的盒子綁定一個(gè)點(diǎn)擊事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先獲取input標(biāo)簽
      2、給input標(biāo)簽綁定change事件
      3、把圖片回顯
       */
//      1、先回去input標(biāo)簽
      var $input = $("#file");
//      2、給input標(biāo)簽綁定change事件
      $input.on("change" , function(){
        //補(bǔ)充說(shuō)明：因?yàn)槲覀兘oinput標(biāo)簽設(shè)置multiple屬性，因此一次可以上傳多個(gè)文件
        //獲取選擇圖片的個(gè)數(shù)
        var files = this.files;
        var length = files.length;
        console.log("選擇了"+length+"張圖片");
        //3、回顯
        $.each(files,function(key,value){
          //每次都只會(huì)遍歷一個(gè)圖片數(shù)據(jù)
          var div = document.createElement("div"),
            img = document.createElement("img");
          div.className = "pic";
          var fr = new FileReader();
          fr.onload = function(){
            img.src=this.result;
            div.appendChild(img);
            document.body.appendChild(div);
          }
          fr.readAsDataURL(value);
        })
      })
    })
  })
</script>

在看一下運(yùn)行的效果

效果圖

這回就達(dá)到了我們的預(yù)期效果。這就結(jié)束了嗎，肯定不是的，當(dāng)我們?cè)俅吸c(diǎn)擊上傳圖片按鈕，肯定會(huì)把上一次的結(jié)果給覆蓋掉，那當(dāng)我們跑業(yè)務(wù)的時(shí)候，這肯定不是我們想要看到的，那我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢，那肯定是用多個(gè)input標(biāo)簽啊，那我們?cè)趺茨鼙ＷC我們點(diǎn)擊的時(shí)候就是新加的那個(gè)input標(biāo)簽?zāi)?，我的解決方案是這樣的，我們把上一次的input標(biāo)簽的id屬性清除掉，為我們新生成的input標(biāo)簽加上這個(gè)屬性，因?yàn)槲覀兪峭ㄟ^(guò)id綁定事件的，所以我們就可以為我們新生成的input標(biāo)簽綁定事件了，而原來(lái)的input標(biāo)簽因?yàn)闆](méi)有了id屬性，而不被選中，我們來(lái)看代碼

<script>
  $(document).ready(function(){
    //為外面的盒子綁定一個(gè)點(diǎn)擊事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先獲取input標(biāo)簽
      2、給input標(biāo)簽綁定change事件
      3、把圖片回顯
       */
//      1、先回去input標(biāo)簽
      var $input = $("#file");
      console.log($input)
//      2、給input標(biāo)簽綁定change事件
      $input.on("change" , function(){
        console.log(this)
        //補(bǔ)充說(shuō)明：因?yàn)槲覀兘oinput標(biāo)簽設(shè)置multiple屬性，因此一次可以上傳多個(gè)文件
        //獲取選擇圖片的個(gè)數(shù)
        var files = this.files;
        var length = files.length;
        console.log("選擇了"+length+"張圖片");
        //3、回顯
        $.each(files,function(key,value){
          //每次都只會(huì)遍歷一個(gè)圖片數(shù)據(jù)
          var div = document.createElement("div"),
            img = document.createElement("img");
          div.className = "pic";
          var fr = new FileReader();
          fr.onload = function(){
            img.src=this.result;
            div.appendChild(img);
            document.body.appendChild(div);
          }
          fr.readAsDataURL(value);
        })
      })
      //4、我們把當(dāng)前input標(biāo)簽的id屬性remove
      $input.removeAttr("id");
      //我們做個(gè)標(biāo)記，再class中再添加一個(gè)類(lèi)名就叫test
      var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
      $(this).append($(newInput));
    })
  })
</script>

效果圖

總結(jié)

以上所述是小編給大家介紹的如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: