zoukankan      html  css  js  c++  java
  • common-fileupload上传图片并显示图片

    效果图如下:

                                     

    代码:

    注意:需要jar包:commons-fileupload-1.2.1.jar  和 commons-io-1.4.jar

    index.jsp

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title>添加图片</title>
            <script type="text/javascript">
                //打开上传页面
                function openUpload(){
                    var win = window.showModalDialog("/upload.jsp","","dialogWidth:300px;dialogHeight:200px;scroll:no;status:no");
                    if(win != null){
                        document.getElementById("photo_id").value = win;
                        document.getElementById("img_id").src = "/"+win;
                    }
                }
            </script>
        </head>
        <body>
            <h5>添加图片</h5><hr/>
                <p>
                    上传图片:
                    <label>
                        <input type="hidden" id="photo_id" name="photo" value="images/default.gif">
                        <input type="button" onclick="openUpload()" value="上传图片"/><br/>
                        <img id="img_id" alt="" src="/images/default.gif" width="200px" height="200px">
                    </label>
                </p>
          </body>
    </html>
    upload.jsp
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <meta http-equiv="pragma" content="no-cache" />
            <span style="color: #ff0000;"><base target="_self"></span>
            <title>图片上传</title>
        </head>
        <body>
            <h5>图片上传</h5><hr/>
            <p style="color: red">${requestScope.errorMsg}</p>
            <form id="form1" name="form1" action="/servlet/Upload" method="post" enctype="multipart/form-data">
                <div>注:图片大小最大不能超过3M!</div>
                <div>
                    <input type="file" name="file_upload"/>
                    <input type="submit" value="上传"/>
                </div>
            </form>
        </body>
    </html>
    Upload.java 中的主要代码:
    public class Upload extends HttpServlet {
    
        private String uploadPath = "aa/upload/"; // 上传文件的目录  
        private String tempPath = "aa/uploadtmp/"; // 临时文件目录  
        private String serverPath = null;
        
        private int sizeMax = 3;//图片最大上限
        private String[] fileType = new String[]{".jpg",".gif",".bmp",".png",".jpeg",".ico"};
        
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/html");
            response.setCharacterEncoding("utf-8"); //设置编码,方式返回的中文乱码
            
            serverPath = getServletContext().getRealPath("/").replace("\", "/");
            //Servlet初始化时执行,如果上传文件目录不存在则自动创建
            if(!new File(serverPath+uploadPath).isDirectory()){
                new File(serverPath+uploadPath).mkdirs();
            }
            if(!new File(serverPath+tempPath).isDirectory()){
                new File(serverPath+tempPath).mkdirs();
            }
    
            DiskFileItemFactory factory = new DiskFileItemFactory();
            factory.setSizeThreshold(5*1024); //最大缓存
            factory.setRepository(new File(serverPath+tempPath));//临时文件目录
            
            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setSizeMax(sizeMax*1024*1024);//文件最大上限
            
            String filePath = null;
            try {
                List<FileItem> items = upload.parseRequest(request);//获取所有文件列表
                for (FileItem item : items) {
                    //获得文件名,这个文件名包括路径
                    if(!item.isFormField()){
                        //文件名
                        String fileName = item.getName().toLowerCase();
                        
                        if(fileName.endsWith(fileType[0])||fileName.endsWith(fileType[1])||fileName.endsWith(fileType[2])||fileName.endsWith(fileType[3])||fileName.endsWith(fileType[4])||fileName.endsWith(fileType[5])){
                            String uuid = UUID.randomUUID().toString();
                            filePath = serverPath+uploadPath+uuid+fileName.substring(fileName.lastIndexOf("."));
                            item.write(new File(filePath));
                            PrintWriter pw = response.getWriter();
                            pw.write("<script>alert('上传成功');window.returnValue='"+uploadPath+uuid+fileName.substring(fileName.lastIndexOf("."))+"';window.close();</script>");
                            pw.flush();
                            pw.close();
                        }else{
                            request.setAttribute("errorMsg", "上传失败,请确认上传的文件存在并且类型是图片!");
                            request.getRequestDispatcher("/upload.jsp").forward(request,response);
                        }
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
                request.setAttribute("errorMsg", "上传失败,请确认上传的文件大小不能超过"+sizeMax+"M");
                request.getRequestDispatcher("/upload.jsp").forward(request,response);
            }
        }
    
    }
     <p style="color: red">${requestScope.errorMsg}</p>

    表示变量的作用域,一共4种。

    pageScope: 表示变量只能在本页面使用。

    requestScope:表示变量能在本次请求中使用。

    sessionScope:表示变量能在本次会话中使用。

    applicationScope:表示变量能在整个应用程序中使用。

    源码下载地址:http://download.csdn.net/detail/u011518709/7885625

  • 相关阅读:
    Ubuntu18.04 安装Redis
    前端周刊,给前端同学准备的每周1小时阅读清单
    如何开发第三方小程序组件
    奋斗路上的安全边际,程序员保险配置指南
    为了知道儿子到底胖不胖,做了一个婴幼儿成长标准计算小程序
    Vue组织架构图组件
    最好用的jQuery-Ajax缓存插件
    Vue-Access-Control:前端用户权限控制解决方案
    RESTful学习及应用
    纯前端实现人脸识别-提取-合成
  • 原文地址:https://www.cnblogs.com/estellez/p/3955763.html
Copyright © 2011-2022 走看看