如何用input標籤上傳多個圖片並回顯

時間 2019-11-17

標籤如何 input 標籤上傳多個圖片简体版

原文原文鏈接

本文主要記錄如何用input標籤和jquery實現多圖片的上傳和回顯，不會涉及後端的交互，大概的效果看圖

咱們從零來作一個這樣的demo

第一步：

咱們先完善一下咱們的頁面，默認的input-file標籤很是醜，咱們美化一下它，不會的能夠百度一下，就是外面套個盒子，設置input的opacity爲0，而後外面的盒子設計成咱們喜歡的樣式便可，我就隨便作了一下。css

仍是放一下源碼，只談效果，不放源碼的都是耍流氓
這是bodyhtml

<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;
    }
    //這是一個用作回顯的盒子的樣式
    .pic{
        width: 100px;
        height: 100px;
    }
    .pic img {
        width: 100%;
        height: 100%;
    }

代碼的量並無多少，接下來咱們就分析一下如何讓圖片回顯；我知道有兩種方式，一種是先上傳到服務器，並返回該圖片的url，而後渲染在頁面中；另外一種呢，是利用h5的FileReader對象直接在本地預覽圖片，用戶確認後再上傳服務器。jquery

咱們是採用第二種形式，既然知道了思路那就開始編程吧

<script>
    $(document).ready(function(){
        //爲外面的盒子綁定一個點擊事件
        $("#uploadImgBtn").click(function(){
            /*
            一、先獲取input標籤
            二、給input標籤綁定change事件
            三、把圖片回顯
             */
//            一、先回去input標籤
            var $input = $("#file");
//            二、給input標籤綁定change事件
            $input.on("change" , function(){
                //補充說明：由於咱們給input標籤設置multiple屬性，所以一次能夠上傳多個文件
                //獲取選擇圖片的個數
                var files = this.files;
                var length = files.length;
                console.log("選擇了"+length+"張圖片");
                //三、回顯
                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>

代碼的思路也能夠說是很簡單，先給外面的盒子綁定點擊事件，而後獲取input標籤，給input標籤綁定change事件，而後用一個for循環把得到的數據回顯出來，for循環裏有一個異步事件onload是用來渲染圖片，來咱們看看效果圖

咱們選擇了三張圖片，卻顯示了一張，話說咱們在for循環裏建立了三個div和img卻只顯示了一張圖片，這裏面確定有蹊蹺。web

咱們來仔細分析一下，前面我已經說了，回顯的for循環裏面有一個異步事件，既然是異步的，可能for循環執行完了，才執行onload事件使咱們設置的下標i值和預期的結果不一致；那咱們如何解決呢，若是咱們能造成一個函數做用域，在裏面每次回顯一張圖片，我以爲咱們就可能解決了。咱們來嘗試一下，咱們前端可使用jquery的each方案，它自帶回調函數，造成了函數做用域。咱們看一下代碼

<script>
    $(document).ready(function(){
        //爲外面的盒子綁定一個點擊事件
        $("#uploadImgBtn").click(function(){
            /*
            一、先獲取input標籤
            二、給input標籤綁定change事件
            三、把圖片回顯
             */
//            一、先回去input標籤
            var $input = $("#file");
//            二、給input標籤綁定change事件
            $input.on("change" , function(){
                //補充說明：由於咱們給input標籤設置multiple屬性，所以一次能夠上傳多個文件
                //獲取選擇圖片的個數
                var files = this.files;
                var length = files.length;
                console.log("選擇了"+length+"張圖片");
                //三、回顯
                $.each(files,function(key,value){
                    //每次都只會遍歷一個圖片數據
                    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>

在看一下運行的效果
編程

這回就達到了咱們的預期效果。這就結束了嗎，確定不是的，當咱們再次點擊上傳圖片按鈕，確定會把上一次的結果給覆蓋掉，那當咱們跑業務的時候，這確定不是咱們想要看到的，那咱們如何解決這個問題呢，那確定是用多個input標籤啊，那咱們怎麼能保證咱們點擊的時候就是新加的那個input標籤呢，個人解決方案是這樣的，咱們把上一次的input標籤的id屬性清除掉，爲咱們新生成的input標籤加上這個屬性，由於咱們是經過id綁定事件的，因此咱們就能夠爲咱們新生成的input標籤綁定事件了，而原來的input標籤由於沒有了id屬性，而不被選中，咱們來看代碼

<script>
    $(document).ready(function(){
        //爲外面的盒子綁定一個點擊事件
        $("#uploadImgBtn").click(function(){
            /*
            一、先獲取input標籤
            二、給input標籤綁定change事件
            三、把圖片回顯
             */
//            一、先回去input標籤
            var $input = $("#file");
            console.log($input)
//            二、給input標籤綁定change事件
            $input.on("change" , function(){
                console.log(this)
                //補充說明：由於咱們給input標籤設置multiple屬性，所以一次能夠上傳多個文件
                //獲取選擇圖片的個數
                var files = this.files;
                var length = files.length;
                console.log("選擇了"+length+"張圖片");
                //三、回顯
                $.each(files,function(key,value){
                    //每次都只會遍歷一個圖片數據
                    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);
                })

            })

            //四、咱們把當前input標籤的id屬性remove
            $input.removeAttr("id");
            //咱們作個標記，再class中再添加一個類名就叫test
            var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        })

    })

</script>

圖片上傳並回顯後端篇
 圖片上傳並回顯Ajax異步篇後端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。