zoukankan      html  css  js  c++  java
  • 上传图片

        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);
        })
  • 相关阅读:
    PAT 甲级1135. Is It A Red-Black Tree (30)
    AVL树模板
    定时器模板
    Listview模板
    Hash二次探测
    BFS小结
    STL之set篇
    完全二叉树-已知中序排序,输出广度排序
    BZOJ2037: [Sdoi2008]Sue的小球
    poj1157LITTLE SHOP OF FLOWERS
  • 原文地址:https://www.cnblogs.com/hzx-5/p/9596865.html
Copyright © 2011-2022 走看看