ajax无刷新的上传的技术
页面的部分：
（1）上传的预览功能的实现
（2）上传的无刷新技术的实现
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="form">
<input type="text" name="username" id="username">
<input type="file" name="file" id="file" onchange="preview()">
<input type="button" value="提交" onclick="upload()">
</form>
<img src="" id="img">
<script>
//预览的功能
function preview() {
var fileInput = document.getElementById("file");
var files = fileInput.files;
if (files[0] != null) {
var file = files[0];
var reader = new FileReader();
reader.onload = function () {
var img = document.getElementById("img");
img.src = reader.result;
}
reader.readAsDataURL(file);
}
}
//无刷新上传的技术
function upload() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
alert(xhr.responseText)
}
xhr.open("post", "/upload", true);
var form = document.getElementById("form");
var data = new FormData(form);
xhr.send(data)
}
</script>
</body>
</html>
控制器的部分：
@Controller
public class UploadController {
@RequestMapping("/upload")
@ResponseBody
public String upload(MultipartFile file ,String username) throws IOException {
System.out.println("姓名：" + username);
System.out.println("文件的原始的大小："+file.getOriginalFilename());
file.transferTo(new File("d:\\"+file.getOriginalFilename()));
return "上传成功";
}
}
第三方的库发送ajax的请求
jquery发送ajax的请求
举例：还是应用的是上个例子，采用ajax的技术上传一个图片：
<form id="form" enctype="multipart/form-data" method="post">
<input type="text" name="username" id="username">
<input type="file" name="file" id="file" onchange="preview()">
<input type="button" value="上传" onclick="upload()">
</form>
<img src="" id="img">
</body>
javascript的代码
<script>
function preview() {
var fileInput = document.getElementById("file")
var files = fileInput.files;
if(files[0] != null){
var reader = new FileReader();
var file = files[0];
reader.onload = function () {
var img = document.getElementById("img");
img.src = reader.result;
}
reader.readAsDataURL(file);
}
};
function upload() {
$.ajax({
contentType:false,
processData:false,
url:"/upload",
data:new FormData(document.getElementById("form")),
type:"post",
success:function () {
},
error:function () {
},
})
}
注意：在上传图片的时候要注意两个属性的参数的修改：
contentType:false, 只有将这个属性设置为false的时候才可以将表单的enctype的属性加上
processData:false 将这个属性设置为false的时候可以避免jquery对Formdata的默认的处理
jquery发送ajax的请求的时候，一般的格式为如下：
$.ajax({
data:"请求参数",
type:"post|get|put|delete", //代表的是请求的类型
url:"请求的路径",
success:fuction(obj){
//这是响应成功后的执行的方法，obj代表的是响应的结果
},
error:function(xhr){
//请求与响应出现错误的时候会执行的函数
}
})
其他的写法
//jquery发送get请求的方式
$.get("请求地址","请求参数").done(function(){}).fail(function(){});
//jquery发送post请求
$.post("请求地址","请求参数").done(function(){}).fail(function(){});