概述
在页面中上传时,之前一般都是需要使用form表单进行上传。html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用
AJAX实现文件上传。
实现代码
1.前端JS代码
var url= /*[[@{/sys/upload}]]*/ ;
function uploadFile(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
// ajax 上传图片
$.post(url, { data: e.target.result},function(ret){
console.info(ret);
},'json');
}
}
2.后端代码
@RequestMapping("/sys/upload")
public JSONObject upload(HttpServletRequest request) {
JSONObject json=new JSONObject();
String data=request.getParameter("data"); int idx=data.indexOf(",");
String fileBase64=data.substring(idx+1);
byte[] fileBytes= Base64.decodeBase64(fileBase64); writeByte("d:\\file.jar", fileBytes); json.put("success", true); return json;
}
在后端代码接收的是base64 编码,转换成bytes后写入文件。