多文件上传带进度条的

        多文件上传有时候要求带进度条显示,现在我就和大家分享一款这样的插件uploadify。

        首先先到官网下载最新的zip压缩包http://www.uploadify.com

        下载完解压后将解压后的文件夹拷贝到项目中,然后开始进行配置

         jsp页面的配置:            

 
  
  
  
  
  

  
            


       

文件列表 
  

       

  

  

   开始上传 

   取消所有上传

  

 

              好了页面配置完了,还有要注意一点记得将uploadify.css中的.uploadify-queue-item .cancel a这个样式的图片url改成background: url('../uploadify/uploadify-cancel.png') 0 0 no-repeat;否则文件后面的图片就显示不出来。

            

             后台servlet代码:               

                //文件保存目录路径
                String savePath = this.getServletConfig().getServletContext().getRealPath("/upload/");
  
                response.setContentType("text/html");
                response.setCharacterEncoding("UTF-8");
                PrintWriter out = response.getWriter();
  
                File saveDirFile = new File(savePath);

               if (!saveDirFile.exists()) {
                      saveDirFile.mkdirs();
               }
  
              // 创建磁盘文件工厂
              FileItemFactory fac = new DiskFileItemFactory();
  
             // 创建servlet文件上传组件
            ServletFileUpload upload = new ServletFileUpload(fac);
  
            //使用utf-8的编码格式处理数据
            upload.setHeaderEncoding("utf-8");
  
           // 文件列表
           List fileList = null;
  
          // 解析request从而得到前台传过来的文件
          try {
                  fileList = upload.parseRequest(request);
           } catch (FileUploadException ex) {
                   ex.printStackTrace();
                   return;
          }

          // 遍历从前台得到的文件列表
         Iterator itr = fileList.iterator();
    
        while (itr.hasNext()) {   
        FileItem item = (FileItem) itr.next();
        String fileName = item.getName();
        // 如果不是普通表单域,当做文件域来处理
       if (!item.isFormField()) {
       try {
              File uploadedFile = new File(savePath, fileName);
              item.write(uploadedFile);
       } catch (Exception e) {
              e.printStackTrace();
      }

    }
  }
     // 这个地方不能少,否则前台得不到上传的结果
     out.write("1");
     out.close();

 

你可能感兴趣的:(多文件上传带进度条的)