JavaScript 中 input 文件框选择图片并转为Base64字符串显示

﹏ヽ暗。殇╰゛Y 2023-09-24 15:23 18阅读 0赞

> 案例背景：实现页面点击 input file 文件框，并将图片转为 base64 回显在当前页面。

![347f45fc326f4cf9bb6e1ef7d3c4b6c2.png][]

html 页面定义上面的内容

javascript：

#### 1、首先给 a 标签在文档就绪函数内部，绑定一个 click 事件。 ####

$(function(){
        //上传按钮绑定事件
        $("#sfzjUploadBtn").click(function(){
    	    $("[name='sfzjUploadFile']").click();
        });
    });

#### 2、input 框的 onchange(this) 事件 ####

f_uploadFile = async (thEle) => {
    	var value = $(thEle).val();
    	if(value==null||value==""){
    		Tip.alert("请上传图片！");
    		return false;
    	}
        //检查文件的后缀格式是否正确
    	var fileType = value.slice(value.lastIndexOf(".")+1).toLowerCase(); 
        if ("png" != fileType && "jpg" != fileType && "jpeg"!=fileType) {
        	Tip.alert("只能上传jpg、jpeg、png文件"); 
            $("#sfzjUploadFile").val("");
            return false;  
        }
        //获取文件
        var file = thEle.files[0];
        //文件转base64
        const base64Str = await changeFileIntoBase64(file);
        //图片回显
    	$("#sfzjUploadBtn").find("img").attr("src",base64Str);
    }

#### 3、上一步中用到了文件转base64 的方法 ####

/**
     * @description 转换文件成base64数据
     * @param {Object} file - 文件对象
     */
    function changeFileIntoBase64(file) {
    	return new Promise((resolve, reject) => {
    		const fr = new FileReader();
          	fr.readAsDataURL(file);
          	fr.onload = (result) => {
            	const base64Str = result.currentTarget.result;
            	resolve(base64Str);
           	};
        });
    }

![37188e41f9d24ee1b0fdd43e4023527c.png][]

#### 4、预览图片 ####

这里我用的比较简单粗暴的方式，直接打开一个 window 窗口，显示图片

function f_showPic(type) {
    	var base64 = $("#sfzjUploadBtn").find("img").attr("src");
    	const img = new Image();
    	img.src = base64;
    	const newWin = window.open('','预览','top=10,left=400,width=1000,height=900');
    	newWin.document.write(img.outerHTML);
    	newWin.document.title = "预览图片";
    	newWin.document.close();
    }

效果如下：

![511a2c4087fc488091215f448ee23f42.png][]

另外实际项目中，还要考虑图片的大小，还有页面回显图片的等比缩放这些问题。

--------------------

*人生苦短，拒绝内卷。我是跟着飞哥学编程，一个一心向阳，向阳而生，努力向上生长的年轻人。加油兄弟们……*

[347f45fc326f4cf9bb6e1ef7d3c4b6c2.png]: https://img-blog.csdnimg.cn/347f45fc326f4cf9bb6e1ef7d3c4b6c2.png
[37188e41f9d24ee1b0fdd43e4023527c.png]: https://img-blog.csdnimg.cn/37188e41f9d24ee1b0fdd43e4023527c.png
[511a2c4087fc488091215f448ee23f42.png]: https://img-blog.csdnimg.cn/511a2c4087fc488091215f448ee23f42.png