使用WebUploader实现上传文件功能（一）

更新时间：2018年01月26日 16:07:18 作者：蚊蚊蚊蚊蚊170624

这篇文章主要为大家详细介绍了使用WebUploader实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

写在前面：

　　文件上传方式很多的，对于大文件的上传，在本次项目中也有涉及，主要是用了分片断点上传大文件。所以就去了解了一下WebUploader，先从简单的上传文件开始吧。

　　在代码中写注释，这样看的比较好点，那就直接上代码来看了解实现的过程吧。

前台jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String scheme = request.getScheme();
  String serverName = request.getServerName();
  String contextPath = request.getContextPath();
  int port = request.getServerPort();

  //网站的访问跟路径
  String baseURL = scheme + "://" + serverName + ":" + port
      + contextPath;
  request.setAttribute("baseURL", baseURL);
%>
<html>
<head>
  <title>WebUploader文件上传简单示例</title>
  <%--引入css样式--%>
  <link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
  <script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
  <%--引入文件上传插件--%>
  <script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script>

  <script type="text/javascript">

      $(function(){
        /*
        对于uploader的创建，最好等dom元素也就是下面的div创建好之后再创建，因为里面有用到选择文件按钮，
        不然会创建报错，这是很容易忽视的地方，故这里放到$(function(){}来进行创建*/
        var uploader = WebUploader.create({

          // swf文件路径
          swf: '${baseURL}/webuploader0.1.5/Uploader.swf',
          // 文件接收服务端。
          server: '${baseURL}/uploadFile',
          // [默认值：'file'] 设置文件上传域的name。
          fileVal:'upload',
          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick:
            {
              multiple: false,
              id: '#filePicker'
            },

          // 上传并发数。允许同时最大上传进程数[默认值：3]  即上传文件数
          threads: 1,
          // 自动上传修改为手动上传
          //auto: true,
          //是否要分片处理大文件上传。
          //chunked: true,
          // 如果要分片，分多大一片？ 默认大小为5M.
          //chunkSize: 5 * 1024 * 1024,
          // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
          //resize: false
        });




        //当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {

          //具体逻辑根据项目需求来写 这里只是简单的举个例子写下
          $one = $("<div >"+file.name+"</div>");
          $("#fileList").append($one);

          });



        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
          // 具体逻辑...
        });

        // 文件上传成功处理。
        uploader.on('uploadSuccess', function (file, response) {
          // 具体逻辑...
          console.log('upload success...\n');
        });
        // 文件上传失败处理。
        uploader.on('uploadError', function (file) {
          // 具体逻辑...
        });
        // 上传传完毕，不管成功失败都会调用该事件，主要用于关闭进度条
        uploader.on('uploadComplete', function (file) {
          // 具体逻辑...
        });


        //点击上传按钮触发事件
        $("#btnClick").click(function(){
          uploader.upload();
        });

      });


  </script>

</head>
<body style="padding:10px">
<div id="layout1">
  <div id="uploader-demo">
    <%--用来装 显示上传文件名称的div--%>
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker" >选择文件</div>
    <button id="btnClick">开始上传</button>

  </div>
</div>
</body>
</html>

后台action:

/**
 * Description:com.ims.action
 * Author: Eleven
 * Date: 2017/12/26 10:50
 */
@Controller("FileAction")
public class FileAction extends BaseAction{

  //记得提供对应的get set方法
  //上传文件对象(和表单type=file的name值一致，在jsp页面我们指定了fileVal:'upload',)
  private File upload;
  //文件名
  private String uploadFileName;
  //上传类型
  private String uploadContentType;
  

  public void uploadFile() throws Exception{

    String str = "D:/upload33/"; //文件保存路径
    System.out.println("文件路径===="+uploadFileName);
    String realPath = str + uploadFileName;
    File tmp =new File(realPath);
    FileUtils.copyFile(upload, tmp);
    System.out.println("上传文件"+uploadFileName+",大小："+(upload.length()/1024/1024)+"M");

  }
  

  public File getUpload() {
    return upload;
  }

  public void setUpload(File upload) {
    this.upload = upload;
  }

  public String getUploadFileName() {
    return uploadFileName;
  }

  public void setUploadFileName(String uploadFileName) {
    this.uploadFileName = uploadFileName;
  }

  public String getUploadContentType() {
    return uploadContentType;
  }

  public void setUploadContentType(String uploadContentType) {
    this.uploadContentType = uploadContentType;
  }
}

struts.xml文件的配置：

 <action name="uploadFile" class="FileAction" method="uploadFile">
 </action>

现在可以运行了，这个只是用WebUploader来实现的一个最基本的文件上传了。在jsp页面跟后台action中，都谈不上有什么逻辑，也不是很完整。因为项目不同，业务流程也不同，故可以先入门，后续根据自己的需求，进行添加的。

运行截图：

之后继续整理实现分片断点上传的文章。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Java中的接口回调实例
今天小编就为大家分享一篇关于Java中的接口回调实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Java基础之反射详解
这篇文章主要介绍了教你怎么通过IDEA设置堆内存空间,文中有非常详细的代码示例,对正在使用IDEA的小伙伴们很有帮助哟,需要的朋友可以参考下
2021-05-05
深入分析Comparable与Comparator及Clonable三个Java接口
接口不是类，而是对类的一组需求描述，这些类要遵从接口描述的统一格式进行定义，这篇文章主要为大家详细介绍了Java的Comparable,Comparator和Cloneable的接口，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-05-05
SpringBoot集成redis的示例代码
redis想必小伙伴们即使没有用过，也是经常听到的，在工作中，redis用到的频率非常高，本文主要介绍了SpringBoot集成redis，感兴趣的可以参考一下
2021-10-10
Java面试题-实现复杂链表的复制代码分享
这篇文章主要介绍了Java面试题-实现复杂链表的复制代码分享，小编觉得还是挺不错的，具有参考价值，需要的朋友可以了解下。
2017-10-10
基于RocketMQ实现分布式事务的方法
了保证系统数据的一致性,我们需要确保这些服务中的操作要么全部成功,要么全部失败,通过使用RocketMQ实现分布式事务,我们可以协调这些服务的操作,保证数据的一致性,这篇文章主要介绍了基于RocketMQ实现分布式事务,需要的朋友可以参考下
2024-03-03
MyBatis中的循环插入insert foreach问题
这篇文章主要介绍了MyBatis中的循环插入insert foreach问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Java使用PreparedStatement接口及ResultSet结果集的方法示例
这篇文章主要介绍了Java使用PreparedStatement接口及ResultSet结果集的方法,结合实例形式分析了PreparedStatement接口及ResultSet结果集的相关使用方法与操作注意事项,需要的朋友可以参考下
2018-07-07
SpringCloud 限流、熔断、降级的区别及实现
本文主要介绍了SpringCloud 限流、熔断、降级的区别及实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-03-03
java反射原理制作对象打印工具
本文主要给大家介绍了java反射原理制作对象打印工具的方法和代码，以及一个热心网友给出的更加简洁方便的代码，小伙伴们需要的话可以参考下。
2015-12-12

使用WebUploader实现上传文件功能（一）

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具