微客导航 » 文章资讯 » JavaScript实现无刷新上传预览图片功能

JavaScript实现无刷新上传预览图片功能

2023-09-27 05:15:07 328

无刷新上传功能如何实现？手写无刷新上传要用到两个东西，FormData和FileReader。

FileReader用于图片浏览。

FormData用于ajax请求。

html代码

先创建表单跟图片的容器

javascript代码

FormData:

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

在这里FormData对象是用来获取form表单内的所有input数据，然后使用ajax请求发送数据到指定url，就不会出现表单提交时跳转的情况。

functiondoUpload(){
varformData=newFormData($("#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对象是用来获取file上来的图片并把图片转换成DataURL形式显示在事先创建的容器中。

functionreadAsDataURL(){
//检验是否为图像文件
varfile=document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");

returnfalse;
}else{
varreader=newFileReader();
//将文件以DataURL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
varresult=document.getElementById("img");
//显示文件
result.src=this.result;
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现无刷新上传预览图片功能

热门推荐

随机推荐