上傳圖片立即顯示

　　之前一個已經工作的同學問我上傳圖片立即顯示怎麼實現，這個問題雖然不難，但我還是要去打開電腦找到項目，點開一個個目錄；這時候博客的作用就顯露出來了。。

　　話不多說，進入正題：

　　先看看效果

　　只需要在js中添加如下代碼就可以實現了

　　　　　　$(function(){
               $("#clickHeadImage").click(function(){
                   $(this).find('span').removeClass('ui-state-hover');
                  //file綁定click，onchange事件，單擊事件打開file，選擇後觸發onchange，再調用單擊事件觸發sumit
                   document.getElementById("userImg").click();
                    document.getElementById("userImg").onchange=function(evt){
                        // document.getElementById("submit").click();
                         var image = '';  
                         var files = evt.target.files;
                         var file=files[0];
                        //function selImage(file){  
                           
                            var reader = new FileReader();  
                            reader.onload = function(evt){  
                                document.getElementById('img').src = evt.target.result;  
                                image = evt.target.result; 
                                
                                  var value = $('#userImg').val();
                                  value = value.split("\\")[2];
                                
                                image = JSON.stringify(image);
                               // alert(image);
                                
                                $.ajax({  
                                    type:'POST',  
                                    url: 'user/uploadImg',  
                                    data: {base64: image,fileName:value},  
                                    async: true,  
                                    dataType: 'text',  
                                    success: function(data){  
                                        if(data==success){  
                                            alert('上傳成功');  
                                        }else{  
                                            alert('上傳失敗');  
                                        }  
                                    }, error: function(err){  
                                        //alert(err);
                                        alert('網路故障');  
                                    }  
                                });   
                                
                            };  
                            reader.readAsDataURL(file);  
                      //  }  
                   } 
               });
               
               $("#clickHeadImage").hover(function(){
                   $(this).removeClass('ui-state-hover');
               });  
　　　　　　});

　　這段代碼主要是讀取你選中的圖片文件，先生成圖片，然後再把生成的文件以base64方式傳遞給後臺,具體流程可以按F12調試一下就知道了

　　圓形圖片框div：

       <div id="clickHeadImage" class="head-img" title="點擊更換頭像">
            <form  id="form" name="form" method="post" action="user/" enctype="multipart/from-data" >
                  <img id="img" src="${user.userimg }" alt="" style="width:88px;height:88px;z-index:0;"/> 
                   <!-- 讓頭像框為圓形，註釋為方形         class="ui-fileupload" 隱藏文件框-->
                   <i class="headframe" style="z-index:0;"></i>
                   <input type="file" class="ui-fileupload" id="userImg" name="userimg" style="z-index:0;display:none;"/>
            </form>
       </div>

　　後臺保存代碼：

//頭像上傳
    @SystemControllerLog(description="頭像上傳")
    @RequestMapping("uploadImg")
    @ResponseBody 
    public String uploadImg(User user,String base64,String fileName,HttpServletRequest request,HttpSession session) {
        // 去掉base64數據頭部data:image/png;base64,和尾部的” " “  
        String[] ww= base64.split(",");  
        base64 = ww[1];  
        String[] aa = base64.split("\"");  
        base64 = aa[0];  
        try {  
            User u=(User) session.getAttribute("user");
            
            //圖片保存到本地  
            //String url="upload/userImg/"+fileName;
            String url="F:\\tomcat\\apache-tomcat-9.0.0.M22\\webapps\\update\\"+fileName;
            //String path=request.getSession().getServletContext().getRealPath(url);  
            Base64File file = new Base64File();  
            file.decoderBase64File(base64, url);  
            
           //將圖片插入資料庫  
            
            user.setId(u.getId());
            user.setUserimg("/update/"+fileName);
            userService.update(user);
            
            
            //更新之後，把session移除再添加，前臺el表達式才能獲取更新數據
           u.setUserimg(user.getUserimg());
           
           session.removeAttribute("user");
           session.setAttribute("user", u);
            //     成功標識  
            return "success";  
        } catch (Exception e) {  
            return "nosuccess";  
        }  
    }

　　特別要註意的是：如果上傳的是png格式的圖片，雖然可以立即顯示，但在後臺有可能會出現base為空的情況，可能是和圖片大小有關？不過最好不要選png圖片