關於文件的上傳和后台接收

文件上傳與文件顯示

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("\n","").replaceAll("\r","");
        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                 }
            });