前端修煉之圖片操作---添加

實現結果圖：

實現原理：該功能關鍵難點就是將input原始樣式隱藏，將input的點擊事件牽引到我們所想的地方或是圖片上。我將每個input包含在他們相應的label元素中，利用for屬性使他們相關聯，這樣label元素上就有了input的點擊事件。然後將input的位子偏移到十萬八千里，這樣它就自然而然的隱藏了。

注：該代碼可擴展，照片最大可上傳數量可更改，但前提是有更大的放置空間，我將它限制最多能上傳8張（因爲8張剛剛好放下，且觀賞性較佳）

html代碼實現：

<div class="addition-part-main">
    <div class="part-cont" id="content">
        <label for="add1" id="num1">
            <img id="show1" src="" alt="">
            <div class="dele" id="dele1" style="display: none">
                <img src="../imgs/dele.png">
            </div>
            <input type="file" name="pic1" id="add1">
        </label>
    </div>
    <div class="part-btn">
        <button id="sure">確認</button>
        <button id="cancel">取消</button>
    </div>
</div>

照舊，css樣式就不貼了，將每個元素位置一一放置清楚就好了。

js代碼實現：

var cnt = 1, flag = 0, sum = 1;  //sum爲添加圖片總數

$('#addPic').on('click', function() {
    $('#addition').toggle();
});

$('#cancel').on('click', function() {
    $('#addition').hide();
});

$('#sure').on('click', function() {
    //確認後操作
    $('#addition').hide();
});

//每添加完出現一個新的待添加框（若達到最大限制，則不出現）
function addNext() {
    if(nowId < cnt || sum == 8) {  //總數限定，不得多於8張
        return ;
    }
    cnt++;
    sum++;
    var area = document.getElementById('content');
    var str = '<label for="add' + cnt + '" id="num' + cnt + '">' + 
     '<img id="show' + cnt + '" src="" alt=""><div class="dele" id="dele' + cnt + '" style="display: none">' +
    '<img src="../imgs/dele.png"></div><input type="file" name="pic' + cnt + '" id="add' + cnt + '"></label>';
    area.innerHTML += str;
    addMethod();
}

//將上傳圖片展示出來
function showPic(num) {
    var pic = new FileReader();
    var str = 'add' + num;
    var file = document.getElementById(str).files[0];
    pic.readAsDataURL(file);
    pic.onload = function(e) {
        tempic = this.result;
        str = 'show' + num;
        document.getElementById(str).src = this.result;
        document.getElementById('dele'+num).style.display = "";
        addNext();
    };
}

//標明當前所操作的圖片num
function setNum(num) {
    nowId = num;
    document.getElementById('add'+num).onchange = function() {
        showPic(num);
    };
}

//刪除該圖片
function delePic(item) {
    flag = 1;
    var area = document.getElementById('num'+item);
    area.setAttribute('for', '-1');
    area.style.display = "none";
    sum--;
    if(sum == 7) {    //總數限定，少於7可再添加
        addNext();
    }
}

//設置每張圖片框的點擊事件和刪除事件
function addMethod() {
    for(var i = 1; i <= cnt; i ++) {
        let item = i;
        document.getElementById('num'+item).onclick = function() {
            if(flag == 0) {
                setNum(item); 
            } else {
                flag = 0;
                return ;
            }
        };
        document.getElementById('dele'+item).onclick = function(event) {
            delePic(item);
        };
    }
}

addMethod();

差不多就是這樣了，請多多指教^ ^