H5图片上传实现（实现版）

最新推荐文章于 2024-07-15 15:33:33 发布

梦若辰宇

最新推荐文章于 2024-07-15 15:33:33 发布

阅读量1.2w

点赞数 3

分类专栏：前端开发工具文章标签： FormData 图片上传图片预加载

本文链接：https://blog.csdn.net/Jason_A/article/details/86216247

版权

前端开发同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

工具

8 篇文章 0 订阅

订阅专栏

本文介绍了H5中实现图片上传和预览的功能，涉及FormData、Base64、FileReader和Blob对象。通过监听img元素点击事件，调用input[type=file]选择图片，使用FileReader将图片转换为base64预览，并通过FormData封装数据进行异步上传。文章指出，实际应用中还需考虑不同系统和机型的兼容性、图片大小压缩及多图片上传等问题。

摘要由CSDN通过智能技术生成

H5图片上传实现

实现用到的知识：

FormData:

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。(FormData是H5新增)

base64:

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。

由于2的6次方等于64，所以每6个位元为一个单元，对应某个可打印字符。三个字节有24个位元，对应于4个Base64单元，即3个字节可表示4个可打印字符。

能够实现：用一段字符串来描述一个二进制数据，所以很多时候也可以使用base64方式上传。

FileReader对象：

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader也就是将本地文件转换成base64格式的dataUrl。

Blob对象：

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。

简单说Blob就是一个二进制对象，是原生支持的

代码实现：

需求：点击头像预览图片，拉起选择图片文件事件，预览选择的图片，点击确定按钮图片文件上传。

HTML:

首先既然需要预览那么就会有img元素，既然有选择文件，就会有input type=file；

<img src="img/touxiang.jpg" alt="" class="img" id="showImg" />
<input accept="image/*" type="file" id="uploadIMG" onchange="btnUploadFile(event)" style="display: none"/>

src="img/touxiang.jpg" 代表的默认值，默认加载时展示的图片

accept="image/*" 安卓端需要的参数

JavaScript：

首先，监听img元素的点击事件，如果触发，拉起input的change事件（其实click也一样）

$("#showImg").click(function(){
  $("#uploadIMG").click();
});

然后，实现预览加载，即input的change事件：

function btnUploadFile(e){
  //获取图片文件
  var imgFile = e.target.files[0]; 
  //后缀选取
  if (!/\/(?:jpeg|jpg|png)/i.test(imgFile.type)){
    console.log(图片格式不支持);
    return;
  }
  //异步读取文件
  var reader = new FileReader();
  reader.onload = function(evt) {
    //替换url
    $("#showImg").attr("src",evt.target.result);
  }
  reader.readAsDataURL(imgFile);
}

最后，FormData封装数据并上传：

var formData = new FormData();
formData.append("imageFile", document.getElementById('uploadIMG').files[0]);
formData.append("photoUrl", $("#showImg").attr("src"));
$.ajax({
	url: url + token,
	async : false,
	type: "POST",
	data: formData,
	dataType: "json",
	processData : false,
	contentType : false,
	success: function(data) {
		console.log("success");
	},
	error: function(xhr) {
		console.log("error");
	}
});