上传图片

    function getId(id){
        return document.getElementById(id)
    }
    var obj ={
        fileInput : getId('test-image-file'),
        info: getId('test-file-info'),
        preview: getId('test-image-preview'),
        file: '',
        reader: new FileReader(),
        data: ''
    }
    obj.fileInput.addEventListener('change',function(){
        //清除背景图片
        obj.preview.style.background = '';
        //检查文件是否选择
        if(!obj.fileInput.value){
            obj.info.innerHTML = '没有选择文件';
            return;
        }
        //获取file引用
        obj.file = obj.fileInput.files[0];
        //获取File信息
        obj.info.innerHTML = '文件:' + obj.file.name + '<br>' +
                             '大小:' + obj.file.size + '<br>' +
                             '修改:' + obj.file.lastModifiedDate.toLocaleString();
        if(obj.file.type !== 'image/jpeg' && obj.file.type !== 'image/png' && obj.file.type !== 'image/gif'){
            alert('不是有效的图片文件!');
            return;
        }
        //读取文件
        obj.reader.onload = function(e){
            obj.data = e.target.result;
            obj.preview.style.backgroundImage = 'url('+ obj.data +')';
        }
        obj.reader.readAsDataURL(obj.file);
    })
原文地址:https://www.cnblogs.com/hzx-5/p/9596865.html