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

跟着飞哥学编程

发布于 2022-12-10 15:05:43

8650

发布于 2022-12-10 15:05:43

文章被收录于专栏：跟着飞哥学编程(全栈联盟社区)跟着飞哥学编程(全栈联盟社区)

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

html 页面定义上面的内容

<a href="javascript:void(0)" class="uploadBt" id="sfzjUploadBtn">
	<img alt="" src="../../../assets/images/defaul_upload.jpeg"/>
</a>
<input type="file" accept="image/jpg,image/jpeg,image/png" name="sfzjUploadFile" id="sfzjUploadFile" style="display:none;" onchange="f_uploadFile(this)">

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);
       	};
    });
}

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();
}

效果如下：