码迷,mamicode.com
首页 > Web开发 > 详细

上传图片

时间:2016-04-21 11:46:40      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

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

 

上传图片

标签:

原文地址:http://www.cnblogs.com/youaremysunshine/p/5416153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!