zoukankan      html  css  js  c++  java
  • 将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:fakepathicon (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=" 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。

     

  • 相关阅读:
    【转】 robotframework(rf)中对时间操作的datetime库常用关键字
    在RobotFramework--RIDE中把日期转化为整型进行运算
    Oracle中date转为timstam可以函数to_timestamp的方式来转化
    Java项目缺少.project文件
    数据库时间戳转换日期(MYSQL数据库)
    spring+struts+mybatis中关于报错org.hibernate.exception.GenericJDBCException: Connection is read-only. Queries leading to data modification are not allowed 的产生原因及解决方案
    新加字段问题(增加联合主键)
    集合问题
    数组面试题
    集合的问题
  • 原文地址:https://www.cnblogs.com/linjiaxin/p/7816800.html
Copyright © 2011-2022 走看看