上传图片立即显示

2018-06-24 02:03:57来源：未知阅读 ()

　　之前一个已经工作的同学问我上传图片立即显示怎么实现，这个问题虽然不难，但我还是要去打开电脑找到项目，点开一个个目录；这时候博客的作用就显露出来了。。

　　话不多说，进入正题：

　　先看看效果

　　只需要在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>

　头像css代码：

.personal-main{ float:left; width:940px; height:auto; margin-top:10px; color:#848484}
.pmain-profile{ width:940px; height:340px; background-color:#fff;}    
.pmain-profile .pmain-welcome{ height:40px; line-height:40px;padding:0 30px; border-bottom:1px solid #f2f2f2;}
.pmain-user{ width:880px; height:114px; padding:15px 30px;border-bottom:1px solid #f2f2f2;}
.pmain-user .user-head{ float:left; width:133px; height:114px;}
.pmain-user .user-head .head-img{ float:left; width:88px; height:88px; position:relative; cursor:pointer;}
.pmain-user .user-head .head-img img{ position:absolute; top:0; left:0; z-index:2;}
.pmain-user .user-head .head-img .headframe{ position:absolute; left:0; top:0; background:url(../image/grzx.png) 0 -280px; width:88px; height:88px; z-index:5;}

 主要是最后一句：background:url()内就是加入背景图片的路径，最好选小一点的图片，然后改一下后面的width、height

　后台保存代码：

//头像上传
    @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";  
        }  
    }