文档章节

使用uploadify实现文件上传

风中帆
 风中帆
发布于 2015/09/06 16:19
字数 745
阅读 5098
收藏 7

使用uploadify实现文件上传

 

  1. 导入需要的js,css等文件

  2. 添加uploadify.jsp文件

    //代码

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <base href="<%=basePath%>">
    <link href="<%=basePath%>static/js/uploadify/uploadify.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<%=basePath%>static/js/uploadify/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
    </head>
    <body>
     <div id="fileQueue"></div>
     <label>图片: </label>
     <div class="showImg">
      <img class="showImgs" width="100" height="100" alt="" src="easy/js/uploadify/default_image.gif">
     </div>
     <input type="file" name="uploadify" id="uploadify" style="width:200px;"/>
        <p><a href="javascript: jQuery('#uploadify').uploadifyUpload()">开始上传</a></p>
    </body>
    <script type="text/javascript">
    //官方网址:http://www.uploadify.com/
    $(document).ready(function(){
     $("#uploadify").uploadify({
      'uploader' : "<%=basePath%>static/js/uploadify/uploadify.swf",
      'script'    : "<%=basePath%>uploadFile",//此处是servlet请求路径;如果请求使用uploadFile.jsp,此处就是uploadFile.jsp的路径"<%=basePath%>static/js/uploadify/uploadFile.jsp"
      'cancelImg' : "<%=basePath%>static/js/uploadify/cancel.png",
      'folder' : "static/uploads",//上传文件存放的路径,请保持与uploadFile.jsp中PATH的值相同
      'queueId' : "fileQueue",
      'queueSizeLimit' : 10,//限制上传文件的数量
      'fileExt' : "*.rar,*.zip",
      //'fileDesc' : "RAR *.rar",//限制文件类型
      'auto'  : false,
      'multi'  : true,//是否允许多文件上传
      'simUploadLimit': 2,//同时运行上传的进程数量
      'buttonText': " select files",
      'onComplete': function(event, ID, fileObj, response, data) {
        //response返回值:重命名后的文件名称,文件保存路径
        var resultArray = response.split(",");
        var realName = resultArray[0];//图片现在的名称,前面加上时间的图片名称,带扩展名
        realName = $.trim(realName);
        var p = "<%=basePath%>static/uploads/"+realName;
        $(".showImgs").attr("src",p);
       }
     });
    });
    </script>
    </html>

  3. 上传文件:添加servlet方法(或者使用uploadFile.jsp)

    (1)//servlet方法代码

    @RequestMapping("uploadFile")
         @ResponseBody
         public String uploadifyStart(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException{
          String savePath = request.getSession().getServletContext().getRealPath("/");
          String PATH = "/static/uploads/";
       savePath = savePath + PATH;
       File f1 = new File(savePath);
       //System.out.println(savePath);
       if (!f1.exists()) {
        f1.mkdirs();
       }
      
       DiskFileItemFactory fac = new DiskFileItemFactory();
       ServletFileUpload upload = new ServletFileUpload(fac);
       upload.setHeaderEncoding("utf-8");
       List fileList = null;
       try {
        fileList = upload.parseRequest(request);
       } catch (FileUploadException ex) {
        return "";
       }
       Iterator<FileItem> it = fileList.iterator();
       String name = "";
       String extName = "";
       while (it.hasNext()) {
        FileItem item = it.next();
        if (!item.isFormField()) {
         name = item.getName();
         long size = item.getSize();
         String type = item.getContentType();
         //System.out.println(size + " " + type);
         if (name == null || name.trim().equals("")) {
          continue;
         }
      
         // 扩展名格式:
         if (name.lastIndexOf(".") >= 0) {
          extName = name.substring(name.lastIndexOf("."));
         }
      
         File file = null;
         do {
          // 生成文件名:
          name = UUID.randomUUID().toString();
          file = new File(savePath + name + extName);
         } while (file.exists());
      
         File saveFile = new File(savePath + name + extName);
         try {
          item.write(saveFile);
         } catch (Exception e) {
          e.printStackTrace();
         }
        }
       }
          return name + extName;
         }

     (2)uploadFile.jsp实现上传

    //uploadFile.jsp代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ page import="java.io.*, java.util.*, org.apache.commons.fileupload.*" %>
    <%@ page import="org.apache.commons.fileupload.disk.*, org.apache.commons.fileupload.servlet.*" %>
    <%!
     
     String PATH = "/static/uploads/";
     public void upload(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
      String savePath = this.getServletConfig().getServletContext().getRealPath("");
      savePath = savePath + PATH;
      File f1 = new File(savePath);
      System.out.println(savePath);
      if (!f1.exists()) {
           f1.mkdirs();
      }
     
      DiskFileItemFactory fac = new DiskFileItemFactory();
      ServletFileUpload upload = new ServletFileUpload(fac);
      upload.setHeaderEncoding("utf-8");
      List fileList = null;
      try {
       fileList = upload.parseRequest(request);
      } catch (FileUploadException ex) {
       return;
      }
      Iterator<FileItem> it = fileList.iterator();
      String name = "";
      String extName = "";
      while (it.hasNext()) {
       FileItem item = it.next();
       if (!item.isFormField()) {
        name = item.getName();
        long size = item.getSize();
        String type = item.getContentType();
        System.out.println(size + " " + type);
        if (name == null || name.trim().equals("")) {
         continue;
        }
     
        // 扩展名格式:
        if (name.lastIndexOf(".") >= 0) {
         extName = name.substring(name.lastIndexOf("."));
        }
     
        File file = null;
        do {
         // 生成文件名:
         name = UUID.randomUUID().toString();
         file = new File(savePath + name + extName);
        } while (file.exists());
     
        File saveFile = new File(savePath + name + extName);
        try {
         item.write(saveFile);
        } catch (Exception e) {
         e.printStackTrace();
        }
       }
      }
      response.getWriter().print(name + extName);
     }
    %>
    <%
     upload(request, response);
    %>

     4.uploadify文件下载地址http://download.csdn.net/detail/lychaox/3677400

 

 

本文转载自:

风中帆
粉丝 14
博文 197
码字总数 17695
作品 0
青岛
私信 提问
基于uploadify.js实现多文件上传和上传进度条的显示

  uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网地址是http://www.uploadify.com/,进入...

雲霏霏
2014/12/08
0
0
基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔《Web开发中的文件上传组件uploadify的使用》中可以看到,Asp.NET中如何使用这个组件...

walb呀
2017/12/04
0
0
Django使用Uploadify组件实现图片上传

Uploadify组件上传文件很酷,可以实现文件进度上传,而且可以批量上传各种文件。好处还很多,具体详情登到官网看看文档了解吧。在同类组件中,Uploadify做的也很出色。打算在Django中用它,两...

岭南六少
2011/08/08
2.5K
4
uploadify 实现文件上传

uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异. 如何实现图片上传功能? 在...

coderzs
2017/10/07
0
0
使用Uploadify(UploadiFive)多文件上传控件遇到的坑

最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现。相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配置起...

chaun
2016/07/08
505
2

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
31分钟前
3
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
34分钟前
4
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
52分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
今天
8
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
915
12

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部