java web开发中用户上传头像如何实现，尽量详细些。。。。谢谢各位大侠！

Posted 2023-05-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java web开发中用户上传头像如何实现，尽量详细些。。。。谢谢各位大侠！相关的知识，希望对你有一定的参考价值。

参考技术A 1、准确的说，应该是文件上传如何实现。
2、文件上传，一般都是能过组件来实现，
自己来写上传的话，不太方便，也没必要，别人都做的太多了。
3、smartupload或是common-fileupload都是经常用的组件，具体用法，直接搜“smartupload
上传案例"或是”common-fileupload
使用案例“就可以了。参考技术B 用apache上传组件或cos上传框架+struts2。so
convenient.
图片可以放在本地或存进数据库

mui开发app之cropper裁剪后上传头像的实现

应广大读者建议，已经将该项目源码提交到地址：
https://github.com/devilyouwei/dashen

在大多数app项目中，都需要对用户头像的上传，之前做web开发的时候，我主要是通过input type=file的标签实现的，上传后，使用php对图片进行裁剪，这种方式比较传统简单。

此次app开发中需要做到用户选择本地相册或者进行拍照->对照片进行裁剪->最后同时更新本地头像和服务器端的图片。（app常见套路）

我将要结合：mui，cropper，jquery开发！

实现思路：

1.用户点击头像，打开actionsheet

2.选择图片或者拍照后返回的图片绝对地址传入单独的裁剪页面，跳转到裁剪页面

3.裁剪页面裁剪后选择确认则将裁减后图片保存到localstorage中（其实是把整个图片保存到本地数据库中）

4.触发一个更新上一页头像的事件，返回上一页

5.看到图片已经更改

6.保存，图片上传到服务器（json）

7.服务器将图片的base64保存到数据库（text类型），实现数据库保存图片，当然可以使用后端语言的方法还原为图片后保存在文件系统中（建议：小图可保存在数据库中，大图保存在文件系统）

实现工具和插件，直接看代码：

<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/exif.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/fastclick.js"></script>

css

<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/iconfont.css" rel="stylesheet" />
<link href="../css/cropper.css" rel="stylesheet" />

这里我们主要使用了一个cropper.js的插件，自行百度下载，目前比较好用的插件只有这个，大神的话自己写一个吧

注意cropper必须使用jquery，而jquery比较臃肿，在其他mui中尽量不要引入，我也是迫不得已，使用jq并非我本意

fastclcik.js是加速点击触发，一般在手机端开发其实用不到，因为一般使用tap，这里我加了进去，似乎对裁剪图片时手势操作有帮助，(+_+)?，不加也没有影响，测试过

iconfont是按钮图标

exif.js是可以检测图片拍摄时采用横向还是纵向

这几个请自行百度下载！

接下来可以开发了：

一共两个页面，

headinfo.html——编辑页面

cropper.html——裁剪页面

headinfo.html

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>我的资料</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/style.css" rel="stylesheet" />
        <style type="text/css">
            .head {
                height: 40px;
            }
            
            #head {
                line-height: 40px;
            }
            
            .head-img {
                width: 40px;
                height: 40px;
            }
            
            #head-img1 {
                position: absolute;
                bottom: 10px;
                right: 40px;
                width: 40px;
                height: 40px;
            }
            
            .mui-fullscreen {
                position: fixed;
                z-index: 20;
                background-color: #000;
            }
            
            .mui-content {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <button type="button" id="finish" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>完成
            </button>
            <h1 class="mui-title">头信息</h1>
        </header>
        <div class="mui-content">

            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a id="head" class="mui-navigate-right">个人头像
                        <span class="mui-pull-right head">
                            <img class="head-img mui-action-preview" id="head-img1" src=""/>
                        </span>
                    </a>
                </li>
            </ul>

            <div class="mui-input-row mui-margin-vertical">
                <h5 class="mui-margin-horizontal-xs">个人签名：</h5>
                <input class="mui-padding-lg" id="signature" type="text" placeholder="个人签名" />
            </div>
        </div>

        <script src="../js/mui.min.js"></script>
        <script src="../js/app.js"></script>
        <script type="text/javascript">
            (function($) {
                mui.init({
                    swipeBack: true
                });

                $.plusReady(function() {
                    //初始化头像，和预览图
                    setTimeout(function() {
                        defaultInfo();
                        setTimeout(function() {
                            initImgPreview();
                        }, 200);
                    }, 0);

                    //弹出菜单
                    mui(".mui-table-view-cell").on("tap", "#head", function(e) {
                        if(mui.os.plus) {
                            var a = [{
                                title: "拍照"
                            }, {
                                title: "从手机相册选择"
                            }];
                            plus.nativeUI.actionSheet({
                                title: "修改头像",
                                cancel: "取消",
                                buttons: a
                            }, function(b) {
                                switch(b.index) {
                                    case 0:
                                        break;
                                    case 1:
                                        getImage();
                                        break;
                                    case 2:
                                        galleryImg();
                                        break;
                                    default:
                                        break
                                }
                            })
                        }

                    });

                    //完成并返回
                    document.getElementById("finish").addEventListener("tap", function() {
                        var newSign = document.getElementById("signature").value;
                        var oldSign = app.getUserInfo().signature;
                        if(oldSign === newSign)
                            $.back();
                        else {
                            app.request("User", "updateSignature", {
                                \'signature\': newSign
                            }, function(res) {
                                if(res.login == 0) {
                                    mui.toast(res.info);
                                    app.clearToken();
                                    app.toLogin();
                                    return false;
                                }
                                if(res.status == 1) {
                                    app.setSignature(newSign);
                                    mui.toast(res.info);
                                    var view = plus.webview.getWebviewById("index");
                                    $.fire(view, "updateHeadInfo");
                                    $.back();
                                } else {
                                    mui.toast(res.info);
                                }
                            });
                        }

                    });

                });

                //拍照
                function getImage() {
                    var c = plus.camera.getCamera();
                    c.captureImage(function(e) {
                        //存储到本地
                        plus.io.resolveLocalFileSystemURL(e, function(entry) {
                            cutImage(entry.toLocalURL());
                        }, function(e) {
                            console.log("读取拍照文件错误：" + e.message);
                        });
                    }, function(s) {
                        console.log("error" + s);
                    }, {
                        filename: "_doc/head.jpg"
                    })
                }

                //相册
                function galleryImg() {
                    plus.gallery.pick(function(a) {
                        plus.io.resolveLocalFileSystemURL(a, function(entry) { //entry为图片原目录（相册）的句柄
                            cutImage(entry.toLocalURL());
                        }, function(e) {
                            console.log("读取图片错误：" + e.message);
                        });
                    }, function(a) {}, {
                        filter: "image"
                    })
                };

                //设置默认头像
                function defaultInfo() {
                    var my_icon = app.getHeadImg(); //头像
                    var signature = app.getUserInfo().signature; //签名
                    if(my_icon && my_icon != "") {
                        document.getElementById("head-img1").src = my_icon;
                    } else {
                        document.getElementById("head-img1").src = \'../images/my_icon.jpg\';
                    }
                    if(signature && signature != "") {
                        document.getElementById("signature").value = signature;
                    } else {
                        document.getElementById("signature").value = "";
                    }
                }

                //预览图像
                document.getElementById("head-img1").addEventListener(\'tap\', function(e) {
                    e.stopPropagation(); //阻止冒泡
                });

                function initImgPreview() {
                    var imgs = document.querySelectorAll("img.mui-action-preview");
                    imgs = mui.slice.call(imgs);
                    if(imgs && imgs.length > 0) {
                        var slider = document.createElement("div");
                        slider.setAttribute("id", "__mui-imageview__");
                        slider.classList.add("mui-slider");
                        slider.classList.add("mui-fullscreen");
                        slider.style.display = "none";
                        slider.addEventListener("tap", function() {
                            slider.style.display = "none";
                        });
                        slider.addEventListener("touchmove", function(event) {
                            event.preventDefault();
                        })
                        var slider_group = document.createElement("div");
                        slider_group.setAttribute("id", "__mui-imageview__group");
                        slider_group.classList.add("mui-slider-group");
                        imgs.forEach(function(value, index, array) {
                            //给图片添加点击事件，触发预览显示；
                            value.addEventListener(\'tap\'java web实现上传头像功能，
 mui开发app之cropper裁剪后上传头像的实现
 j2ee项目web开发用户上传头像jsp页面显示问题
 如何java中实现上传头像功能？
 如何java中实现上传头像功能？
 Android开发之用户头像上传

java web开发中 用户上传头像如何实现，尽量详细些。。。。谢谢各位大侠！

mui开发app之cropper裁剪后上传头像的实现

java web开发中用户上传头像如何实现，尽量详细些。。。。谢谢各位大侠！