H5 readfile 多图片预览

/**
 * 多图片前端预览
 * @author Tiac
 */
function preView(_this, offset){
    let max_nums = 10;//单位 s
    let max_size = 2;//单位 M
    let pic_div  = '.pic-div';

    if( document.querySelectorAll(pic_div+' img').length >= max_nums){
        return alert('最多可上传'+max_nums+'张图片');
    }

    if(_this.files[offset].size > (max_size*1024*1024)){
        alert('图片 '+_this.files[offset].name+' 超过限制('+max_size+' mb)');
        if (_this.files[offset+1]) {
            return preView(_this, ++offset);
        } else {
            return false;
        }
    }

    let reader        = new FileReader();
    reader.onload     = function(e) {
        let img       = document.createElement('img');
        img.src       = e.target.result;
        img.title     = '点击移除图片';
        img.className = 'img-box';
        document.querySelector(pic_div).appendChild(img);
        img.addEventListener('click', function(){
            this.parentNode.removeChild(this);
        });

        if(offset<_this.files.length-1){
          preView(_this, ++offset);
        }
    }
     reader.readAsDataURL(_this.files[offset]);
}

 

posted @ 2017-02-21 10:49  Tiac  阅读(535)  评论(0编辑  收藏  举报