input输入框[type=file]上传图片文件转base64数据

最新推荐文章于 2023-11-24 12:49:57 发布

linziping

最新推荐文章于 2023-11-24 12:49:57 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： base64 type=file input 图片

本文链接：https://blog.youkuaiyun.com/linziping/article/details/109200332

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种通过input标签选择图片文件并将其转换为Base64格式的方法。包括使用不同浏览器获取图片路径、创建Image对象及最终生成Base64编码的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input输入框[type=file]上传图片文件转base64数据

1、input图片文件选择标签

<input id="upload_file" type="file" accept="image/*"  />

2、获取input选择图片地址，并创建Image对象

$('#upload_file').change(function () {
    var url， imgbase64;
    
	//获取file对象URL 
    if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
        url = document.getElementById('upload_file').value;
    } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
        url = window.URL.createObjectURL(document.getElementById('upload_file').files.item(0));
    } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
        url = window.URL.createObjectURL(document.getElementById('upload_file').files[0]);
    }
	
	// 创建Image对象
    var image = new Image();
    image.src = url;
    image.onload = function () {
        imgbase64 = getBase64Image(image);
    } 
});

3、获取选择图片base64数据

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    var width = img.naturalWidth || img.width;
    var height = img.naturalHeight || img.height;
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height); // 绘制图像
    
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 图片格式
    var dataURL = canvas.toDataURL("image/" + ext); // 包含图片展示的 data URI
    return dataURL;
}