多文件上传带进度条的

最新推荐文章于 2022-09-26 14:36:08 发布

fengyhj

最新推荐文章于 2022-09-26 14:36:08 发布

阅读量3.5k

点赞数

文章标签：文件上传组件

本文链接：https://blog.csdn.net/fengyhj/article/details/8286390

版权

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

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

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

jsp页面的配置：

<link href="uploadify/uploadify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
  <script type="text/javascript" src="js/swfobject.js"></script>


  
  <script type="text/javascript">
   $(document).ready(function () {
    $("#uploadify").uploadify({
       'swf': 'uploadify/uploadify.swf',
       'uploader':'Uploadfile',
          'queueID' : 'fileQueue', //和存放队列的DIV的id一致

       'auto' : false, //是否自动开始
       'multi': true, //是否支持多文件上传
       'buttonText': 'BROWSE', //按钮上的文字
       'simUploadLimit' : 1, //一次同步上传的文件数目

       'fileSizeLimit' : '6000KB',//限制的大小要转换成KB否则容易报错，这里是总共的大小，不是单个文件的
       'queueSizeLimit' : 10, //队列中同时存在的文件个数限制
       'fileTypeExts': '*.*',//允许的格式
       'fileTypeDesc': '所有文件', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
       'onUploadSuccess': function ( fileObj, response, data) {
                 alert("文件:" + fileObj.name + "上传成功");
       },
       'onUploadError': function(event, queueID, fileObj) {
                 alert("文件:" + fileObj.name + "上传失败");
       },
       'onCancel': function(event, queueID, fileObj){
                 alert("取消了" + fileObj.name);
          }
      });

   });

   </script>

<body>
        <fieldset><legend><font color="red">文件列表</font></legend>
  <div id="fileQueue" style="width:30%"></div>
        </fieldset>
  <input type="file" name="uploadify" id="uploadify" />

  <p>

   <a href="javascript:jQuery('#uploadify').uploadify('upload','*')">开始上传</a> 

   <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>

  </p>

</body>

好了页面配置完了，还有要注意一点记得将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();

fengyhj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多文件上传带进度条的

多文件上传有时候要求带进度条显示，现在我就和大家分享一款这样的插件uploadify。首先先到官网下载最新的zip压缩包http://www.uploadify.com。下载完解压后将解压后的文件夹拷贝到项目中，然后开始进行配置 jsp页面的配置：
复制链接

扫一扫