zoukankan      html  css  js  c++  java
  • 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]);
    }
  • 相关阅读:
    SQL补充
    SQL练习题
    HDU 2907
    Codeforces 814D
    Codeforces 814C
    Codeforces 1004D
    Codeforces 1004E
    CodeForces 909F
    CodeForces 909E
    CodeForces 909D
  • 原文地址:https://www.cnblogs.com/tujia/p/6422993.html
Copyright © 2011-2022 走看看