这篇文章主要为大家详细介绍了javascript实现无刷新上传预览图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
无刷新上传功能如何实现？手写无刷新上传要用到两个东西，FormData和FileReader。
FileReader 用于图片浏览。
FormData 用于ajax请求。
html代码
立即学习“Java免费学习笔记（深入）”；
先创建表单跟图片的容器
@@##@@
javascript代码
修正说明：1，实现真正的软件开源。2，安装界面的美化3，真正实现栏目的递归无限极分类。4，后台添加幻灯片图片的管理，包括添加，修改，删除等。5，修正添加新闻的报错信息6，修正网站参数的logo上传问题7，修正产品图片的栏目无限极分类8，修正投票系统的只能单选问题9，添加生成静态页功能10，添加缓存功能特点和优势1. 基于B/S架构，通过本地电脑、局域网、互联网皆可使用，使得企业的管理与业务不受地域
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对象是用来获取file上来的图片并把图片转换成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 ;
}
}
}
