正文 

当前位置： 首页 > java > java教程

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

林加欣 林加欣     2022-09-30     447

关键词：

带有图片的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="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。

 

 

如何在上传图片时在客户端用js判断图片大小并弹出提示

...的有四个input和一个上传按钮<tdclass="input"><inputTYPE="file"name="FILE1"OnKeyDown="returnfalse"SIZE="60"><br><inputTYPE="file"name="FILE2"OnKeyDown="returnfalse"SIZE="60"><... 查看详情

php多文件上传实现代码

...quot;method="post"enctype="multipart/form-data"><inputtype="file"name="file[]"><br><inputtype="file"name="file[]"><br><inputtype="submit"value="uploads"></form></body></htm... 查看详情

inputtype="file"多图片上传

单个的inputtype="file"表单也是可以实现多图片上传的代码如下:   <formaction="manypic.php"method="post"enctype="multipart/form-data">      <inputtype="file"name="manypic[ 查看详情

inputtype="file"的一些问题

file可以上传文件，但通常情况下大家都会需要设置文件上传的格式上传文件的格式由一个accept属性来控制列如：<inputtype="file"id="file"accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="uplo 查看详情

<inputtype="hidden"name="__viewstate"id="__viewstate"value=&quo

这是ASP.NET网站用来存储客户端的隐藏信息 有3种办法解决：1.禁用viewstat1this.EnableViewState = false; 2.去掉页面上所有的服务器标记1runat="server" 3.参考该方法,存储到SESSION1http://blog.163.com/xu_ming_003/blog/static/122559 查看详情

js实现inputtype="file"文件上传示例代码

...现选择文件上传功能在开发中，文件上传必不可少，<inputtype="file"/>是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让，<inputtype="file"/>隐藏，点其他的标签（图片等）来时实现选择文件上传功能... 查看详情

inputtype="file"文件上传到后台读取

html页面（表单采用bootStrap）js部分://更换头像时把上传的图片post方式到控制器<scripttype="text/javascript">functionupload()varfiles=$(‘input[name="fileField"]‘).prop(‘files‘);//获取到文件列表if(files.length==0)alert(‘请选择文件‘);re 查看详情

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

】为inputtype="file"按钮设置样式【英文标题】：Stylinganinputtype="file"button【发布时间】：2010-10-0900:52:05【问题描述】：如何设置输入type="file"按钮的样式？&lt;inputtype="file"/&gt;【问题讨论】：我将... 查看详情

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

】为inputtype="file"按钮设置样式【英文标题】：Stylinganinputtype="file"button【发布时间】：2010-10-0900:52:05【问题描述】：如何设置输入type="file"按钮的样式？&lt;inputtype="file"/&gt;【问题讨论】：我将... 查看详情

上传文件隐藏inputtype="file",用其它标签实现

html：<aid="js-load-diagram"title="导入BPMN文件"onclick="bpmnFile.click()">上传文件<inputtype="file"id="bpmnFile"style="display:none"></a>js：$(‘#bpmnFile‘).on(‘change‘,function(e){}); 查看详情

django - 如何将图像数组发布到视图

...我的views.py中捕捉到那些POSTED图像文件。我的html：&lt;inputtype="file"name=&quo 查看详情

原来样式改变不了（inputtype="file"）

label{background-color:#979fa8;color:#fff;display:inline-block;padding:.8rem4rem;cursor:pointer;margin-bottom:1rem;position:relative;overflow:hidden;text-align:center}span{cursor:pointer}input[type="f 查看详情

errorinread.dcf(file.path(pkgname,"description"),c("package","type&quo

安装R包时产生如下错误：Errorinread.dcf(file.path(pkgname,"DESCRIPTION"),c("Package","Type")):无法打开链结此外:Warningmessages:1:Indownload.file(url,destfile,method,mode="wb",...):downloadedlength409600!=reportedlength10025142:Inunzip(zipname... 查看详情

使用 <input type="file"> 读取本地文件？ [复制]

】使用<inputtype="file">读取本地文件？[复制]【英文标题】：Readinglocalfileswith<inputtype="file">?[duplicate]【发布时间】：2011-08-1721:16:04【问题描述】：我看过一些演示，其中mozilla人员将照片放入保管箱，然后在... 查看详情

jquery中判断数组是不是为空

<formaction=""><inputtype="file"name="fname[]"/><inputtype="file"name="fname[]"/><inputtype="file"name="fname[]"/><inputtype="file"name="fname[]"/></form>这是一个批量... 查看详情

inputtype="file"accept="image/*"上传文件慢的问题解决办法

相信大家都写过<inputtype="file"name="file"class="element"accept="image/*">默认过滤掉所有非图片文件：这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题，可能要等6~10s才能弹出文件选择对话框。简直不能忍呀。在IE和Firef... 查看详情

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

】有没有办法将inputtype="file"\\\'HttpPotedFileBase\\\'的src设置为asp.netmvc中已上传的图片？【英文标题】：Isthereawaytosetthesrcofinputtype="file"\'HttpPotedFileBase\'settoalreadyuploadedPictureinasp.netmvc?有没有办法将inputtype=&qu 查看详情

<inputtype='file'>左边用来显示路径的部分怎么可以去掉？

...tById("f").value;alert(path);)</script><form><inputtype="file"id="choosefile"/><inputtype="file"id="f"style="display:none;"/></form></body></html>参考技术Astyle="w 查看详情