webUpload组件实现文件上传功能和下载功能

一、上传功能

首先引用基于jquery的百度上传组件webuploader（webuploader.css，webuploader.js）(jquery版本要求>1.10，webuploader版本：0.1.5)，下载链接：http://www.jq22.com/jquery-info2665

<link rel="stylesheet" type="text/css" href="webuploader.css"/>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="webuploader.js"></script>

创建初始化方法，初始化webuploader插件对象(可以写在一个js文件中，外部js文件引用即可)

//初始化方法

//id：上传文件关联数据id(可选)，successCallBack：外部调用的上传函数，fileType：文件类型

function initUpload(id,successCallBack){

     var fileType;

     var dhtml = '';

         dhtml += '<div>';

         dhtml += '<table id="file-list" class="table table-bordered"><tr><th width="130px">文件名称</th><th>文件大小</th><th>上传进度</th></tr></table>';

         dhtml += '<div class="btn btn-primary" id="select-file">选择文件</div><div style="margin-left:10px" class="btn btn-primary" id="start-upload">开始上传</div>';

         dhtml += '</div>';

         //点击上传跳出的弹窗

         var d = dialog({

              title: '文件上传',

              width: 360,

              //加载标签

              content: dhtml

         })

         //显示弹窗

         d.showModal();

    //创建并初始化WebUploader对象

     var fileUploader = WebUploader.create({

         // swf文件路径(引用下载的webuploader的压缩包里的swf文件)

         swf: 'Uploader.swf',

         //是否允许重复的图片

          duplicate :true,

          // 选完文件后，是否自动上传

         auto: false,

         // 文件上传的服务器地址。

         server: "UploadServlet",

         // 选择文件的按钮。可选。

         // 内部根据当前运行是创建，可能是input元素，也可能是flash.

         pick: '#select-file',

         // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

         resize: false,

         //上传文件类型

         accept: fileType || null,

         /*//线程数

        threads: 1,

        //单个文件大小限制

        fileSingleSizeLimit: 2000,

        //上传文件数量限制

        fileNumLimit:10,

        //上传前不压缩

        compress:false,*/

     });

     //监听WebUploader事件:

     //当有一批文件加载进队列时触发事件

     fileUploader.on( 'fileQueued', function( file ) {

         var html = '';

         var attachmentSize = WebUploader.formatSize(file.size);

         html += '<tr id="' + file.id +'"><td>' +file.name+'<b></b></td><td>'+attachmentSize+'</td><td><div class="progress" style="margin-bottom:0"><div class="progress-bar" style="width: 0%"></div></div></td></tr>';

         $(html).appendTo('#file-list');

     });

     // 文件上传过程中创建进度条实时显示。

     fileUploader.on( 'uploadProgress', function( file, percentage ) {

         $("#"+file.id).find('b').html('<span>' + percentage*100 + '%</span>');

         $('#'+file.id+' .progress').find(".progress-bar").css('width',percentage*100 + '%');//控制进度条

     });

     // 文件开始上传时执行。

     fileUploader.on( 'uploadStart', function( file ) {

     });

     // 文件上传成功时执行。

     fileUploader.on( 'uploadSuccess', function(file,response) {

         var filePath = response.id;

         if(response.error == 0){

              successCallBack(file,filePath);

         }else{

              alert(response.message,3);

         }

     });

     // 文件上传失败时执行。

     fileUploader.on( 'uploadError', function( file ) {

         fileType = file.type;

     });

     //错误处理

     fileUploader.on('error', function( code ) {

        var text = '';

        var message = '';

        if(fileType){

        message = fileType.extensions

        }else{

        message = "doc,docx"

        }

        switch( code ) {

          case  'F_DUPLICATE' : text = '该文件已经被选择了!' ;

          break;

          case  'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ;

          break;

          case  'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!';

          break;

          case 'Q_TYPE_DENIED' : text = '请上传'+'  '+message+'  '+'类型的文件';

          break;

          default : text = '未知错误!';

          break; 

        }

        alert(text,3);

      });

     // 所有文件上传完成触发

     fileUploader.on( 'uploadFinished', function( file ) {

         d.remove();

     });

     $("#start-upload").click(function(){

         //调用WebUploader的upload()方法，开始上传此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。

         //可以指定开始某一个文件。

         fileUploader.upload();

     })

}

未涉及的方法或参数请看官方文档：http://fex.baidu.com/webuploader/doc/index.html

3. HTML页面

<table border='1' id='theTable'>

     <tr>

         <th>id</td>

         <th>操作</td>

     </tr>

     <tr>

         <td>1</td>

         <td><a style="cursor:pointer;color:#337ab7;" id="upload" class="upload"/>上传</a></td>

     </tr>

</table>

页面上传函数

$('.upload').live("click", function() {

     var id = $(this).closest("tr").find("td").eq(0).text();

     initUpload(id,uploadFile);

});

//将上传的文件信息及上传路径传入后端,后端经过处理录入数据库

function uploadFile(file, filePath) {

    var fileName = file.name;

    $.ajax({

        url : "/service/serviceMethod/"+id+"/"+fileName+"/"+filePath,

        type : "POST",

        contentType : "application/json",

        data : JSON

        success: function(data){

            alert("附件上传成功",1);

            location.reload();

        },

        error : function() {

            alert("上传文件异常!",3);

        }

    });

}

二、下载功能

页面函数

function download(obj){

     var url= '';

     if(typeof(obj.filePath) != "undefined") {

         url = obj.filePath;

     } else if(typeof($(obj).attr("name")) != "undefined"){

         url = $(obj).attr("name"); 

     }

     if(url == '') {

         return ;

     }

     if(url.indexOf("\\")>-1){

         url = url.replace(/\\/g,"/");

     }

     if (url.indexOf("upload/") >= 0 || url.indexOf("temp/") >= 0) {

         var url = "/downloadServlet?filePath=" + url;

         downloadContent(url);

     }else{

         alert("文件路径错误，下载失败",3);

     }

}

java后端downloadServlet代码

/**

 * 下载文件

 */

@WebServlet("/downloadServlet")

public class DownloadServlet extends HttpServlet {

     //编码格式

     private String code = "utf-8";

     public DownloadServlet() {

         super();

     }

     public void init(ServletConfig config) throws ServletException {

     }

     protected void doGet(HttpServletRequest request, HttpServletResponse response)

              throws ServletException, IOException {

         InputStream  systemConfig= request.getServletContext().getResourceAsStream("/WEB-INF/classes/systemConfig.properties");

         Properties properties = new Properties();

         //加载properties文件

         properties.load(systemConfig);

         //文件下载后存放路径

         String fileSystemPath = pro.getProperty("fileSystemPath");

         //下载路径

         String filePath = request.getParameter("filePath");

         File file = new File(fileSystemPath + File.separator + filePath);

         /* 如果文件存在 */

         if (file.exists()) {

              //设置文件内容编码格式

              String fileName = URLEncoder.encode(file.getName(), code);

              //清除下载后文件首部的空白行

              response.reset();

              ServletContext servletContext=request.getServletContext();

              //使客户端浏览器通过MIME类型来处理json字符串

              response.setContentType(servletContext.getMimeType(fileName)); 

              //附件下载

              response.addHeader("Content-Disposition", "attachment; filename=" + fileName);

              int fileLength = (int) file.length();

              response.setContentLength(fileLength);

              /* 如果文件长度大于0 */

              if (fileLength > 0) {

                   /* 创建输入流 */

                   InputStream inStream = null;

                   ServletOutputStream outStream = null;

                   try {

                       inStream = new FileInputStream(file);

                       byte[] buf = new byte[4096];

                       /* 创建输出流 */

                       outStream = response.getOutputStream();

                       int readLength;

                       while (((readLength = inStream.read(buf)) != -1)) {

                            outStream.write(buf, 0, readLength);

                       }

                   } finally {

                       inStream.close();

                       outStream.flush();

                       outStream.close();

                   }

              }

         }

     }

     protected void doPost(HttpServletRequest request, HttpServletResponse response)

              throws ServletException, IOException {

         doGet(request, response);

     }

}

systemConfig.properties文件

fileSystemPath=D:/downLoadFile

参考文章：http://blog.ncmem.com/wordpress/2023/09/14/webupload%e7%bb%84%e4%bb%b6%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%8a%9f%e8%83%bd%e5%92%8c%e4%b8%8b%e8%bd%bd%e5%8a%9f%e8%83%bd/

欢迎入群一起讨论

本栏目推荐文章
• C++实现文件内查找字符串
• IDEA项目名称后面出现中括号，模块Modules的名子和文件夹名称不同，可以右键修改名称也可以在File->Project Structure 修改Modules的Name(快捷键ctrl+Shift+Alt+s)
• 和利时MACS6通过dat文件实现任意时间范围与测点的历史数据提取与科研分析
• 2024-01-13 记录react-dnd拖拽组件的用法
• 类模板分文件编写
• Linux文件IO之二 [补档-2023-07-21]
• k8s核心组件介绍
• Linux文件IO之一 [补偿-2023-07-21]
• 十行python代码实现文件去重，去除重复文件的脚本
• vim编辑器实现左边目录右边是文件内容

功能 组件 webUpload 文件功能 组件webupload文件 webuploader组件 文件demo webuploader组件 文件php 断点webuploader组件 文件 webuploader组件 webuploader文件 上传下载webuploader实例 功能 断点webuploader文件 线程webuploader文件 webuploader浏览器 文件