日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

css代碼：

 
 
 
 

  
  
  
  
.xj-wrap {
  
  
  
  
            position: relative;
  
  
  
  
            display: inline-block;
  
  
  
  
            border: 1px dashed #888;
  
  
  
  
            width: 200px;
  
  
  
  
            height: 200px;
  
  
  
  
            border-radius: 6px;
  
  
  
  
            overflow: hidden;
  
  
  
  
        }
  
  
  
  
        .xj-wrap::before {
  
  
  
  
            content: '+';
  
  
  
  
            font-size: 36px;
  
  
  
  
            position: absolute;
  
  
  
  
            transform: translate(-50%, -50%);
  
  
  
  
            left: 50%;
  
  
  
  
            top: 50%;
  
  
  
  
            color: #ccc;
  
  
  
  
        }
  
  
  
  
        .xj-wrap .xj-pre-img {
  
  
  
  
            width: 100%;
  
  
  
  
            height: 100%;
  
  
  
  
            background-repeat: no-repeat;
  
  
  
  
            background-position: center center;
  
  
  
  
            background-size: 100%;
  
  
  
  
        }
  
  
  
  
        .xj-file {
  
  
  
  
            position: absolute;
  
  
  
  
            left: 0;
  
  
  
  
            right: 0;
  
  
  
  
            bottom: 0;
  
  
  
  
            top: 0;
  
  
  
  
            opacity: 0;
  
  
  
  
            cursor: pointer;
  
  
  
  
        }
 
 
 
 

js代碼：

 
 
 
 

  
  
  
  
(function(win, doc){
  
  
  
  
    function xjFile(opt) {
  
  
  
  
        var defaultOption = {
  
  
  
  
            el: doc.body,
  
  
  
  
            accept: '*', // 格式按照'image/jpg,image/gif'傳
  
  
  
  
            clsName: 'xj-wrap',
  
  
  
  
            beforeUpload: function(e) { console.log(e) },
  
  
  
  
            onProgress: function(e) { console.log(e) },
  
  
  
  
            onLoad: function(e) { console.log(e) },
  
  
  
  
            onError: function(e) { console.error('文件讀取錯(cuò)誤', e) }
  
  
  
  
        };
  
  
  
  

  
  
  
  
        // 獲取dom
  
  
  
  
        if(opt.el) {
  
  
  
  
            opt.el = typeof opt.el === 'object' ? opt.el : document.querySelector(opt.el);
  
  
  
  
        }
  
  
  
  

  
  
  
  
        this.opt = minix(defaultOption, opt);
  
  
  
  
        this.value = '';
  
  
  
  
        this.init();
  
  
  
  
    }
  
  
  
  

  
  
  
  
    xjFile.prototype.init = function() {
  
  
  
  
        this.render();
  
  
  
  
        this.watch();
  
  
  
  
    }
  
  
  
  

  
  
  
  
    xjFile.prototype.render = function() {
  
  
  
  
        var fragment = document.createDocumentFragment(),
  
  
  
  
            file = document.createElement('input'),
  
  
  
  
            imgBox = document.createElement('div');
  
  
  
  
        file.type = 'file';
  
  
  
  
        file.accept = this.opt.accept || '*';
  
  
  
  
        file.className = 'xj-file';
  
  
  
  
        imgBox.className = 'xj-pre-img';
  
  
  
  
        // 插入fragment
  
  
  
  
        fragment.appendChild(file);
  
  
  
  
        fragment.appendChild(imgBox);
  
  
  
  
        // 給包裹組件設(shè)置class
  
  
  
  
        this.opt.el.className = this.opt.clsName;
  
  
  
  
        this.opt.el.appendChild(fragment);
  
  
  
  
    }
  
  
  
  

  
  
  
  
    xjFile.prototype.watch = function() {
  
  
  
  
        var ipt = this.opt.el.querySelector('.xj-file');
  
  
  
  
        var _this = this;
  
  
  
  
        ipt.addEventListener('change', (e) => {
  
  
  
  
            var file = ipt.files[0];
  
  
  
  

  
  
  
  
            // 給組件賦值
  
  
  
  
            _this.value = file;
  
  
  
  

  
  
  
  
            var fileReader = new FileReader();
  
  
  
  

  
  
  
  
            // 讀取文件開始時(shí)觸發(fā)
  
  
  
  
            fileReader.onloadstart = function(e) {
  
  
  
  
                if(_this.opt.accept !== '*' && _this.opt.accept.indexOf(file.type.toLowerCase()) === -1) {
  
  
  
  
                    fileReader.abort();
  
  
  
  
                    _this.opt.beforeUpload(file, e);
  
  
  
  
                    console.error('文件格式有誤', file.type.toLowerCase());
  
  
  
  
                }
  
  
  
  
            }
  
  
  
  

  
  
  
  
            // 讀取完成觸發(fā)的事件
  
  
  
  
            fileReader.onload = (e) => {
  
  
  
  
                var imgBox = this.opt.el.querySelector('.xj-pre-img');
  
  
  
  
                if(isImage(file.type)) {
  
  
  
  
                    imgBox.innerHTML = '';
  
  
  
  
                    imgBox.style.backgroundImage = 'url(' + fileReader.result + ')';
  
  
  
  
                } else {
  
  
  
  
                    imgBox.innerHTML = fileReader.result;
  
  
  
  
                }
  
  
  
  
                
  
  
  
  
                imgBox.title = file.name;
  
  
  
  

  
  
  
  
                this.opt.onLoad(e);
  
  
  
  
            }
  
  
  
  

  
  
  
  
            // 文件讀取出錯(cuò)事件
  
  
  
  
            fileReader.onerror = (e) => {
  
  
  
  
                this.opt.onError(e);
  
  
  
  
            }
  
  
  
  

  
  
  
  
            // 文件讀取進(jìn)度事件
  
  
  
  
            fileReader.onprogress = (e) => {
  
  
  
  
                this.opt.onProgress(e);
  
  
  
  
            }
  
  
  
  

  
  
  
  
            isImage(file.type) ? fileReader.readAsDataURL(file) : fileReader.readAsText(file);
  
  
  
  
            
  
  
  
  
        }, false);
  
  
  
  
    }
  
  
  
  

  
  
  
  
    // 清除ipt和組件的值，支持鏈?zhǔn)秸{(diào)用
  
  
  
  
    xjFile.prototype.clearFile = function() {
  
  
  
  
        this.opt.el.querySelector('.xj-file').value = '';
  
  
  
  
        this.value = '';
  
  
  
  
        return this
  
  
  
  
    }
  
  
  
  

  
  
  
  
    // 簡(jiǎn)單對(duì)象混合
  
  
  
  
    function minix(source, target) {
  
  
  
  
        for(var key in target) {
  
  
  
  
            source[key] = target[key];
  
  
  
  
        }
  
  
  
  
        return source
  
  
  
  
    }
  
  
  
  

  
  
  
  
    // 檢測(cè)圖片類型
  
  
  
  
    function isImage(type) {
  
  
  
  
        var reg = /(image\/jpeg|image\/jpg|image\/gif|image\/png)/gi;
  
  
  
  
        return reg.test(type)
  
  
  
  
    }
  
  
  
  

  
  
  
  
    // 將方法掛載到window上
  
  
  
  
    win.xjFile = xjFile;
  
  
  
  

  
  
  
  
})(window, document);
 
 
 
 

class版(后期規(guī)劃)

class版的也很簡(jiǎn)單，大致框架如下，感興趣的朋友可以實(shí)現(xiàn)一下呦～

 
 
 
 

  
  
  
  
class XjFile {
  
  
  
  
    constructor(opt) {
  
  
  
  

  
  
  
  
    }
  
  
  
  

  
  
  
  
    init() {
  
  
  
  

  
  
  
  
    }
  
  
  
  

  
  
  
  
    watch() {
  
  
  
  

  
  
  
  
    }
  
  
  
  

  
  
  
  
    render() {
  
  
  
  

  
  
  
  
    }
  
  
  
  

  
  
  
  
    clearFile() {
  
  
  
  

  
  
  
  
    }
  
  
  
  

  
  
  
  
    minix(source, target) {
  
  
  
  
        
  
  
  
  
    }
  
  
  
  

  
  
  
  
    isImage(type) {
  
  
  
  
        
  
  
  
  
    }
  
  
  
  
}
 
 
 
 

總結(jié)

該組件仍有需要完善的地方，在后期使用中，會(huì)慢慢更新，優(yōu)化，歡迎大家提出寶貴的建議。