上传图片

    //上传头像
    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);
        } 
    } 

 

posted on 2016-04-21 11:12  理智与情感  阅读(235)  评论(0编辑  收藏  举报