字体-字体+

js将上传图片转换成base64字节

2018-01-31 Javascript/Jquery 访问量 125

在一些特定的场合,我们可能会将图片转换成base64字节流,虽然不是很推荐这种方法,但是特别场景也是可以采取的。之前破晓猫介绍了在php中操作base64与图片之间转换的文章,有兴趣欢迎去看看。

PHP将base64数据流转换成图片并保存

PHP上传base64图片字符串到七牛

那么在js中看看如何来使用呢,首先也得感谢网友,摘自网上的部分代码,我就一字不落地复制下来了,禀着开源的精神~~~~~~

主要方法如下:

function run(input_file,get_data){
        /*input_file:文件按钮对象*/
        /*get_data: 转换成功后执行的方法*/
        if ( typeof(FileReader) === 'undefined' ){
            alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");
        } else {
            try{
                /*图片转Base64 核心代码*/
                //var file = input_file.files[0];
                var file = input_file;
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function(){
                    get_data(this.result);
                }
                reader.readAsDataURL(file);
            }catch (e){
                alert('图片转Base64出错啦!'+ e.toString())
            }
        }
    }

下面是自己调用了,不过首先得准备一个type=file的文件上传框。

//遍历获取到得图片文件

var file = document.getElementById("file1");//图片上传input
//存放图片的父级元素
var imgContainer = document.getElementsByClassName(obj1)[1];
//获取的图片文件
var fileList = file.files;
for (var i = 0; i < fileList.length; i++) {
			
	run(file.files[i], function (data) {

               imgArr.push(data);
               var img = document.createElement("img");
               img.setAttribute("src", data);
               //console.log(imgArr[i]+'==========================');
               var imgAdd = document.createElement("div");
               //imgAdd.setAttribute("class", "z_addImg");
               imgAdd.appendChild(img);
               imgContainer.appendChild(imgAdd);
         });		
			
};

破晓猫博主这里做的是多张图片的上传,单张上传意思一样,这样一来,上面的data便是我们需要的base64的图片字节了。

js base64

标签:

原文来自:http://www.dawnfly.cn/article-1-386.html,转载请注明出处,谢谢【破晓博客复制链接地址