}

传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Song_ling 初级黑马   /  2019-1-10 09:48  /  31 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

首先我们在html中写一个显示头像的div。这里需要强调一点 为什么把img和input放到label下,因为我们需要隐藏这个input 但是隐藏后我们很难找到它的位置,于是我们将图片跟它放在一起,起到点击图片就能弹出相册的效果。

<div id="avatar" class="boxlist2 t1">
        <label class="btn-file" data-role="add">
                <img id = "#avatarImg" src="${user.avatar }" width="220" height="220" alt=""/>
                <input id="avatarFile" accept="image/*" name="avatarFile" type="file" style="display:none;" />
        </label>
</div>
定义控件的点击事件以及图片地址变动后的监听事件
$(function(){
                var inputFile = document.getElementById('avatarFile')
               
                // 监听文件改变
                inputFile.addEventListener('click', function() {this.value = null;}, false);
                inputFile.addEventListener('change', readData, false);
               
        })
文件改变响应函数
// 文件改变响应
        function readData(evt) {
                evt.stopPropagation();
                evt.preventDefault();
       
                var file = evt.dataTransfer !== undefined ? evt.dataTransfer.files[0] : evt.target.files[0];
               
                if (!file.type.match(/image.*/)) {return;}
       
                var reader = new FileReader();
               
                reader.onload = (function() {
                       
                        return function(e) {
                                var img = new Image();
                                img.src = e.target.result;
                               
                                img.onload = (function() {
                                       
                                        var canvas = document.createElement('canvas');
                                        canvas.width = 800;
                                        canvas.height = 800;
                                       
                                        var ctx = canvas.getContext("2d");
                                       
                                        ctx.clearRect(0, 0, canvas.width, canvas.height); // canvas清屏
                                       
                                        //重置canvans宽高 canvas.width = img.width; canvas.height = img.height;
                                       
                                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将图像绘制到canvas上
                                       
                                        canvas.toDataURL("image/jpeg");//必须等压缩完才读取canvas值,否则canvas内容是黑帆布
                                       
                                        cropAndUploadImage(canvas.toDataURL("image/jpeg"));
                                });
                        }
                })(file);
       
                reader.readAsDataURL(file);
       
               
        }

请求后台ajax,这里需要注意的是压缩后的突变是base64码,有个前缀我们需要把它截取掉。这样传到服务端才能正常解码。
function cropAndUploadImage(base64){
               
                var b64 = base64.split(",")[1];
                var load = layerLoad();
                $.ajax({
                        url: 'User!uploadImg.action',
                        type: "post",
                        data:{
                                photo : b64,
                        },
                        dataType: 'json',
                        success:function(data) {
                                if(data.success){
                                        setTimeout(function(){
                                                window.location.reload();
                                        },1000);
                                       
                                }else {
                                        layer.close(load);
                                        layerOpen(date.error);
                                }
                        },  
                        error : function() {  
                                // view("异常!");
                                layer.close(load);
                                layerAlert("图片上传超时!");
                        }
                })
         }


服务端代码
        /**
         * 上传图片
         * @return
         */
        public String uploadImg() {
               
                JSONObject info = new JSONObject();
               
                try {  
                        getRequest().setCharacterEncoding("utf-8");  
                        getResponse().setCharacterEncoding("utf-8");  
                        getResponse().setContentType("text/html");  

                        int userid = (int)getSession().get("userid");
                        String path = "/image/user/";
                       
                        // 对base64数据进行解码 生成 字节数组,不能直接用Base64.decode();进行解密  
                        byte[] photoimg = new BASE64Decoder().decodeBuffer(photo);  
                        for (int i = 0; i < photoimg.length; ++i) {  
                                if (photoimg[i] < 0) {  
                                        // 调整异常数据  
                                        photoimg[i] += 256;  
                                }  
                        }

                        //byte[] photoimg = Base64.decode(photo);//此处不能用Base64.decode()方法解密,我调试时用此方法每次解密出的数据都比原数据大  所以用上面的函数进行解密,在网上直接拷贝的,花了好几个小时才找到这个错误(菜鸟不容易啊)  

                        File file = new File(getRequest().getServletContext().getRealPath(path), userid + ".JPEG");
                        if (!file.exists()) {  
                                file.createNewFile();  
                        }  
                        FileOutputStream out = new FileOutputStream(file);
                        out.write(photoimg);  
                        out.flush();
                        out.close();
                        /**
                         * 更改数据库图片地址
                         */
                        // 图片地址存入数据库 这里就不详细介绍了
                       
                        info.accumulate("success", true);
                } catch (Exception e) {  
                        // TODO Auto-generated catch block  
                        e.printStackTrace();
                        info.accumulate("success", false).accumulate("error", "图片太大,设置失败");
                }  
                super.responsePrint(info.toString());
                return null;
        }


分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条