HTML5 通过 FileReader 实现文件上传

时间:2020-12-25 15:20:47

概述

在页面中上传时,之前一般都是需要使用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后写入文件。