关于文件的上传和后台接收

文件上传与文件显示

1、图片预览

前端页面的代码如下:

　　<form action="" enctype="multipart/form-data" method="post">
        <input type="file" name="file" id="file" onchange="previewFile(this);"/>
        <input type="text" id="text"/>
        <input type="button" value="上传" id="upload" onclick="uploadImage();">
        <img id="image" name = "img" src="" alt="头像" class="image">
    </form>

　

js代码：读取文件

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

　　　　/**图片预览*/
        function previewFile(file){
            if(window.FileReader){
                var reader = new FileReader();
            }else{
                alert("浏览器不支持")
            }
            /**onload事件:文件读取成功触发*/
            reader.onload = function (e) {
                document.getElementById('image').src = e.target.result;
                image = e.target.result;
               // console.log(image);
            };
            /**
             * readAsDataURL()：
             * 该方法将文件读取为一段以 data: 开头的字符串，
             * 这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。
             */
            reader.readAsDataURL(file.files[0]);

        }

2、文件发送后台

js代码:发送数据到后台

 /**提交请求到后台，将文件对象作为json字符串发送*/
        var image='';
        function uploadImage() {
            var data = {value:image};
            alert(image);
            $.ajax({
                type:'POST',
                url:'/login/ModifyImage',
                contentType:'application/json;charset=utf-8',
                data:JSON.stringify(data),//json字符串格式发送
                dataType:'json',
                success:function (result) {
　　　　　　　　　　　　readImg(result);
                    alert("成功");
                }
            });
        }

3、java后台接收数据

思路:前台传以data:image/jpeg;base64,开头的base64编码的String字符串，后台接收字符串以后先进行base64解码 .decodeBuffer()，转换成二进制编码，然后使用字节输出流FileOutputStream（）将文件保存到指定目录下。 

/**实现上传图片功能*/
    @RequestMapping(value = "/ModifyImage",method = RequestMethod.POST)
    @ResponseBody
    public String changeImage(@RequestBody String data) throws IOException {
        /**将json字符串转成json对象*/
        JSONObject jsonObject = JSONObject.fromObject(data);
        /**获取文件的头部分*/
        String header = "data:image/jepg;base64,";
        /**获取文件的实体部分*/
        String image = jsonObject.getString("value");
        System.out.println(image.length());
        /**剪切头部分*/
        image = image.substring(header.length());
        BASE64Decoder decoder = new BASE64Decoder();
            /**用base64解码，decodeBuffer()转成二进制编码*/
            byte[] bytes = decoder.decodeBuffer(image);
            long time = System.currentTimeMillis();
            /**指定保存的路径*/

            String str = LoginController.class.getPackage().toString();
            System.out.println(str);
            File path = new File("F:/temp/"+time+".jpg");
            System.out.println(path);
            FileOutputStream outputStream = new FileOutputStream(path);
            outputStream.write(bytes);
            outputStream.close();

        return path.getAbsolutePath();
    }

4、后台处理请求

　　/**服务器向浏览器发送图片*/
    @RequestMapping(value = "/getImage",method = RequestMethod.POST)
    @ResponseBody
    public String sendImg(@RequestBody String path) throws IOException {
        JSONObject jsonObject = JSONObject.fromObject(path);
        /**获取文件的路径*/
        String paths = jsonObject.get("value").toString();
        File file = new File(paths);
        /**读取图片*/
        BufferedImage image = ImageIO.read(file);
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        ImageIO.write(image,"jpg",out);
        /**将当前输出流转为字节数组*/
        byte[] data = out.toByteArray();
        BASE64Encoder encoder = new BASE64Encoder();
        /**对字节数组进行编码*/
        String imageString = encoder.encodeBuffer(data).trim();
        imageString.replaceAll("
","").replaceAll("
","");
        return imageString;
    }

5、前端页面显示图片

 $("#myImg").attr("src","data:image/jpg;base64,"+res);
注意：data:image/jpg;base64,为Base64编码的头

　　　　 /**接收服务器发送过来的图片*/
        function readImg(result) {
            var data = {value:result};
            $.ajax({
                type:'POST',
                url:'/login/getImage',
                contentType:'application/json;charset=utf-8',
                data:JSON.stringify(data),//json字符串格式发送
                dataType:'text',
                success:function (res) {
                    alert(res);
                    $("#myImg").attr("src","data:image/jpg;base64,"+res);13                 }
            });