HTML5 通过 FileReader 实现文件上传

概述

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