将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。

时间: 2024-10-29 04:31:34

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

input type=&#39;file&#39;限制上传文件类型

前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛,就是几行 js 代码就能搞定的事.是的,简单的文件上传是可以直接使用FormData()对象将文件上传:如果问题只是这么简单就好了,可能大家也都遇到过上传文件类型的限制,不知道大家有没有注意到这么简单的方法将文件类型过滤,下面直接贴代码: 1. js实现:js实现上传文件类型的限制是将允许上传的文

js如何将选中图片文件转换成Base64字符串?

如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传文件都是在web页面端通过表单直接提交,再由服务器端捕获请求来进行处理的.但是在前后端分离趋于一种流行趋势,再加上Android和iOS开发技术日渐成熟, 大部分团队都会选择在服务器端仅提供一套通用的webservice数据接口,而web页面.Android和iOS统一都通过这套数据接口来向服务器发送请求和获

js 将图片文件转换成base64

1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getConte

input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value='';

input type file onchange上传文件的过程中,同一个文件二次上传无效的问题。

不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value=''; 转自https://www.cnblogs.com/imsomnus/p/62

有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制

遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://www.cnblogs.com/sunliyuan/p/5737928.html http://blog.okbase.net/jquery2000/archive/1296.html(解释的也很清楚) http://blog.csdn.net/qingyjl/article/details/52003

javascript input type=file 文件上传

在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为微信企业号本身想实现的功能也很纯粹,不需要太多乱七八糟的东西. 我这里只用了JQuery. 总结如下: 1.用户选择文件后,一般只显示一个fakepath,不会显示一个完整的文件目录.用$("input[type='file']")[0].files[0].name即可显示出文件名. 2.

HTML5学习笔记(2):input type file的特性

一. input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: <input type=file> 但是,为了习惯,我们多写成: <input type="file"> 在HTML5出现之前(XHTML),我们的闭合规则则有些出入: <input type="file" /> 顾名思义,选择文件,并上传文件. 在HTML5还没有出现之前,

Android:让WebView支持&lt;input type=”file”…&gt;元素

在Android中,当我们通过WebView打开一个页面时,如果里面有元素是<input type=”file”…>类型的,WebView只能正常的显示样式,但是是无法点击的.要解决这个问题,我们需要重写WebChromeClient. 下面直接给出Demo代码: Activity文件: public class MainActivity extends Activity { private final String host = "demo.com"; private f