将input type="file" 类型的图片文件转成base64

Posted 林加欣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将input type="file" 类型的图片文件转成base64相关的知识,希望对你有一定的参考价值。

带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了。话不多少,看代码:

首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数。

 

<div>
    <input type="file" id="imgTest" type="file" onchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
</div>
<img src="" id="showImage" alt="">

 

 

在这个onchange事件方法中会接收一个event参数,我们可以在这个参数中拿到这个input的标签对象还可以拿到这个文件。

 

function imgChange(e) {
    console.info(e.target.files[0]);//图片文件
    var dom =$("input[id^=‘imgTest‘]")[0];
    console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
    console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (e) {
           console.info(this.result); //这个就是base64的数据了
            var sss=$("#showImage");
            $("#showImage")[0].src=this.result;
        };
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);

}

 

 

拓展 : 把页面中的图片变成base64的数据

 

 

<!--这里先搞上一张图片-->
<img id="img" src="/img/my.jpg" alt="" style="width: 150px;height: 150px">

<input type="button" onclick="imgChaneBase64()" value="img标签绘制到canvas" /><br />
<!--引入html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
    function imgChaneBase64() {
        //将要变成base64的图片的html标签当参数传进来,这里如果将document传进来,就会将整个页面变成图片,在then中会返回一个canvas
        html2canvas(document.getElementById("img")).then(function(canvas) {
            console.info(canvas);
            var imgData = canvas.toDataURL("image/png"); //这里会将canvas转化为base64的数据
            document.body.appendChild(canvas); //页面鼠标右击这个标签时会提示保存图片,保存之后会以png格式保存

        });
    }
</script>

这里要注意的是这种方法其实利用的是截屏的原理,将html内容变成base64的,所有其实不是真的将这个图片变成base64。

 

 

以上是关于将input type="file" 类型的图片文件转成base64的主要内容,如果未能解决你的问题,请参考以下文章

为 input type="file" 按钮设置样式

为 input type="file" 按钮设置样式

html写的type="file"的input怎么去掉默认提示

有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片?

用jQuery重置用于文件上传的input (type="file")

jquery ajax 提交表单,serialize()序列化表单数据,但其对type=file的input也就是上传不支持,怎么办?