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

        //上传头像
        var perImgFile = [];
        var input = document.getElementById('file_input');
        input.onchange = function () {
            // 也可以传入图片路径:lrz('../demo.jpg', ...
            var file = this.files[0];
            var mime = {'png': 'image/png', 'jpg': 'image/jpg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp','gif':'image/gif'};
            var type = file.type; //字符串,文件的MIME类型
            var name = file.name; //本地文件系统中的文件名
            // 如果没有文件类型,则通过后缀名判断(解决微信及360浏览器无法获取图片类型问题)
            if (!type) { 
                type = mime[file.name.match(/.([^.]+)$/i)[1]];
            } 
            if (!/image.(png|jpg|jpeg|bmp|gif)/.test(type)) {
                $.toast("您选择的文件类型不是图片")
                return; 
            } 
            var size = (file.size)/1024;  //文件的字节大小
            if(size > 1024 * 1){
                $.toast("图片最大为:1M");
                return;
            }
            perImgFile.name = name;
            readFile.call(this,"user-photo")
        };
        //读取本地图片
        function readFile(id){ 
            var file = this.files[0]; 
            var reader = new FileReader(); 
            reader.readAsDataURL(file); //读取文件并将文件以数据URI的形式保存在result属性中
            reader.onload = function(e){
                var imgAsDataURL = this.result;  //data:image/jpeg;base64,/9j/4AAQSkZJRgABAgE...
                var index = imgAsDataURL.indexOf(",");
                console.info("base64:"+imgAsDataURL);
                $("#"+id).attr("src",imgAsDataURL);
                perImgFile.base64 = imgAsDataURL.substr(index+1);
            } 
        } 
  • 相关阅读:
    NYOJ 542 试制品(第五届河南省省赛)
    714-Card Trick
    716-River Crossing
    1248-海岛争霸
    51Nod
    51Nod
    NYOJ_1274_信道安全
    ZZNU 2095 : 我只看看不写题
    前端-HTML标签
    python 17篇 unittest单元测试框架
  • 原文地址:https://www.cnblogs.com/youaremysunshine/p/5416153.html
Copyright © 2011-2022 走看看