本文介绍如何利用JavaScript中的FormData和FileReader对象实现无刷新文件上传及图片预览功能。通过FormData组装表单数据并通过Ajax发送，避免页面跳转；利用FileReader异步读取本地文件并转换为Data URL在页面显示，从而提升用户体验。
无刷新上传与预览的核心原理
要实现无刷新上传功能，主要依赖两个核心对象：FormData和FileReader。
FileReader对象主要用于在前端浏览和显示图片。
FormData对象则负责处理Ajax请求中的数据传输。
HTML结构构建
HTML代码部分
首先需要构建包含文件选择输入框和图片显示区域的容器。
<form enctype="multipart/form-data" id="oForm">
<input type="file" name="file" id="file" onchange="readAsDataURL()" />
<input type="button" value="提交" onclick="doUpload()" />
</form>
<div>
<img alt="" id="img"/>
</div>
JavaScript实现细节
JavaScript代码部分
FormData对象的作用
FormData对象允许开发者组装一组键/值对，用于通过XMLHttpRequest发送请求。它能够更灵活、方便地发送表单数据，且可以独立于表单使用。若将表单的编码类型设置为multipart/form-data，则通过FormData传输的数据格式与通过submit()方法提交的数据格式一致。
在此场景中，FormData对象用于获取form表单内所有input的数据，并通过Ajax请求将数据发送至指定URL，从而避免传统表单提交导致的页面跳转。
function doUpload() {
var formData = new FormData($( "#oForm" )[0]);
console.log(formData);
$.ajax({
url: 'pp',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
console.log(returndata);
},
error: function (returndata) {
console.log(returndata);
}
});
}
FileReader对象的作用
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，通过指定File或Blob对象来定义要读取的文件或数据。
在此场景中，FileReader对象用于获取用户上传的图片文件，并将其转换为Data URL格式，最终显示在预先创建的容器元素中。
function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}else{
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("img");
//显示文件
result.src= this.result ;
}
}
}
以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。