web前端学习笔记-本地图片、文件上传并预览（兼容ie8）

news/2024/7/10 23:06:42 标签: js, jquery, html

文件上传通常会涉及到FileReader对象，主流的chrome FireFox edge 都支持FileReader对象,ie浏览器中ie10以下不支持FileReader对象，ie10以下文件上传的解决办法是用flash
在这里插入图片描述

一、FileReader对象实现文件上传并预览（图片）

文件上传主要是拿到用户上传的本地文件并提交给后台，图片上传是文件上传特殊的一类，经常需要实现图片的预览，预览图片用两种方法，方法一：前端获取图片的base64再渲染页面，方法二：前端提交数据到后台，后台返回一个图片链接，前端再把图片链接渲染到界面。方法二更简单，这里演示方法一。

html代码

html"><input type="file" id="file_obj" onchange="fileChange(this)" accept="image/jpeg" style="display: none;" />
		<button type="button" id="up_btn">点击上传文件</button>
		<img src="" width="200" height="200" id="w_img">

JS代码

//jQuery =>记得引入html" title=jquery>jquery文件
$("#up_btn").click(function() {
	$("#file_obj").click()
})


// 文件上传
function fileChange(obj) {

	let file = obj.files[0]; //获取到文件
	if (file) {

		/* 发送给服务器 */
		$.ajax({
			type: "POST",
			'Content-Type': 'application/html" title=js>json',
			url: init.baseUrl + "/article/uploadImage",
			data: {
				file: file
			},
			success: function(data) {
				// do something
			}
		});

		/*  预览图片 => 如果上传文件 此步骤省略 */
		let fr = new FileReader(); //创建FileReader 对象
		fr.readAsDataURL(file)
		fr.onload = function(e) {
			let res = e.target.result //获取图片base64
			$("#w_img").attr("src", res)

		}
	}

}