• java实现头像上传


    开发环境:jdk1.7,MyEclipse10 
    框架用的是spring。用到了maven工具(maven的包百度下就可以)。

    四步完成,全部复制改参数就可以

    第一步:先在Spring中对图片进行限制

    <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 -->
            <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
                    <property name="defaultEncoding" value="UTF-8"/> 
    <!-- 指定所上传文件的总大小不能超过500KB。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和。
    这个的大小是以字节为单位的,要多大自己算好了再设置-->
                <property name="maxUploadSize" value="500000"/>
                <!-- 最大内存大小 (10240)-->
                <property name="maxInMemorySize" value="40960" />
            </bean>

    第二步:写jsp页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>上传图片</title>
    </head>
    <body>
        <form action="filesUpload" method="POST" name="xiangmu" id="xiangmu"
            enctype="multipart/form-data">
            <table>
                <tr>
                    <td>身份证图片上传:</td>
                    <td><input type=file name="myfiles" id="doc"
                        onchange="showImage();">
                    </td>
                    <div id="localImag">
                        <img id="preview" width=-1 height=-1 style="diplay:none" />
                    </div>
                </tr>
                <tr>
                    <td>公司运营情况:</td>
                    <!-- 为了实现张图片上传,上传框这个name要都一样 -->
                    <td><input type="file" name="myfiles" id="doc1"></td>
                    <td>                    
                    </td>
                </tr>
                <tr>
                    <td><input type="submit" value="提交" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
    
    </html>

    注意: 
    多图上传,上传框的name要都一样,等于发送了一个MultipartFile[]数组。 
    不仅支持上传图片,还支持多文件上传。 
    form的enctype=”multipart/form-data”,这个是上传文件必须的。

    第三步:如果你要实现页面展现图片的功能,就在jsp页面添加下面的方法:

    <script type="text/javascript">
        function showImage() {
            var docObj = document.getElementById("doc");
            var imgObjPreview = document.getElementById("preview");
            if (docObj.files && docObj.files[0]) {
                //火狐下,直接设img属性  
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '120px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();  
                //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式  
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            } else {
                //IE下,使用滤镜  
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                var localImagId = document.getElementById("localImag");
                //必须设置初始大小  
                localImagId.style.width = "250px";
                localImagId.style.height = "200px";
                //图片异常的捕捉,防止用户修改后缀来伪造图片 
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters
                            .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确,请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
            return true;
        }
    </script>

    注意:这个方法只能上传一张来显示,除非你设置多个div。或者:展示多个图片可以找找其他方法。

    第四步:后台接收

    @RequestMapping("/filesUpload")
        //requestParam要写才知道是前台的那个数组
        public String filesUpload(@RequestParam("myfiles") MultipartFile[] files,
                HttpServletRequest request) {
            List<String> list = new ArrayList<String>();
            if (files != null && files.length > 0) {
                for (int i = 0; i < files.length; i++) {
                    MultipartFile file = files[i];
                    // 保存文件
                    list = saveFile(request, file, list);
                }
            }
            //写着测试,删了就可以
            for (int i = 0; i < list.size(); i++) {
                System.out.println("集合里面的数据" + list.get(i));
            }
            return "index";//跳转的页面
        }
    
        private List<String> saveFile(HttpServletRequest request,
                MultipartFile file, List<String> list) {
            // 判断文件是否为空
            if (!file.isEmpty()) {
                try {
                    // 保存的文件路径(如果用的是Tomcat服务器,文件会上传到\%TOMCAT_HOME%\webapps\YourWebProject\upload\文件夹中
                    // )
                    String filePath = request.getSession().getServletContext()
                            .getRealPath("/")
                            + "upload/" + file.getOriginalFilename();
                    list.add(file.getOriginalFilename());
                    File saveDir = new File(filePath);
                    if (!saveDir.getParentFile().exists())
                        saveDir.getParentFile().mkdirs();
    
                    // 转存文件
                    file.transferTo(saveDir);
                    return list;
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            return list;
        }

    注意:upload是文件夹,自己新建下再运行,免得出错。

    结束,全部复制就可以实现了。

    梦想这东西和经典一样,永远不会随时间而褪色,反而更加珍贵!
  • 相关阅读:
    flume
    Hive的安装
    集群的高级设定
    HDFS命令
    2019-9-25:渗透测试,基础学习,初识Hydra,BP爆破密码
    2019-9-17:渗透测试,基础学习,apache初识,mysql初识等笔记
    2019-9-24:渗透测试,css样式,js基础学习笔记
    2019-9-24:渗透测试,JavaScript数据类型基础学习
    2019-9-23:渗透测试,基础学习,http协议数据包的认识,html css的认识,笔记
    转。http,状态码详解
  • 原文地址:https://www.cnblogs.com/haoxiu1004/p/7904342.html
Copyright © 2020-2023  润新知