使用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中，都谈不上有什么逻辑，也不是很完整。因为项目不同，业务流程也不同，故可以先入门，后续根据自己的需求，进行添加的。

运行截图：

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

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

您可能感兴趣的文章:

  • jquery组件WebUploader文件上传用法详解
  • Java中使用WebUploader插件上传大文件单文件和多文件的方法小结
  • Java与WebUploader相结合实现文件上传功能(实例代码)
  • JavaScript中使用webuploader实现上传视频功能(demo)
  • Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug
  • jQuery webuploader分片上传大文件
  • 百度多文件异步上传控件webuploader基本用法解析
  • 推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
  • vue webuploader 文件上传组件开发
  • 使用WebUploader实现分片断点上传文件功能（二）
赞 (0)

相关推荐

  • JavaScript中使用webuploader实现上传视频功能(demo)

    之前有人让我做一个webuploader上传视频,但是一直没有时间,现在抽出了时间来.来完成以下这个简单的demo 第一步,上传视频和上传 图片有什么区别么? 其实是没有的,因为执行的操作都是上传,所以说我们并不用担心上传的问题. 但是webuploader实际上是限制了你上传的参数(这里指的是限制了你的文件扩展名) 我们找到webuploader中的js参数accept中的extensions accept: { title: 'Images', extensions: 'gif,jpg,jp

  • Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug

    先给大家分析下微信浏览器上传图片bug的原因 微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器.具体的环境我也不太了解,但是经过实际多台安卓机型的测试,我采取的方案可以基本确保在安卓机中微信浏览器的成功上传.苹果机型没问题,因为微信的ios客户端使用的是Safari的内核,没有各种坑,且效果最好. 这里给出一个 WebUploader 官方关于移动端适配的 issues 链接.里面提供的方法确实有效,但就是解决的方案并没有很清楚的展示出来,从该issues中

  • 使用WebUploader实现分片断点上传文件功能（二）

    使用WebUploader实现分片断点上传文件功能（二）

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本上后台处理数据都是用的Servlet,或者是SpringMVC,由于最近的项目一直都是Struts2,所以这里就用Struts2中的action来对数据进行处理,达到分片上传文件的效果. 1.什么是分片上传? 顾名思义,就是把文件分成一片片,即让一个文件,分割成好几个小文件,然后再上传.这样做的好处

  • vue webuploader 文件上传组件开发

    vue webuploader 文件上传组件开发

    最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的webuploader.js.Uploader.swf css样式就直接写在组件里面了 <template> <div> <div id="list" class="uploader-list"></div> <di

  • jQuery webuploader分片上传大文件

    jQuery webuploader分片上传大文件

    一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传,如果文件比较大的话,即便是客户端显示文件已经上传了100%,还是会有一个比较长时间的等待,而且当前页面对服务器的请求也会被阻塞. 正常情况下,一般都是在长传完成后,在服务器直接保存. public void ProcessRequest(HttpContext context) { context.

  • 推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档就知道,能满足你所需要的所有功能,一言以蔽之,大而全:至于缺点,大概就是插件体积太大了,自带样式文件,而且还要依赖jquery类库.详细的教程网上俯拾即是,这里我就

  • 百度多文件异步上传控件webuploader基本用法解析

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核:  若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"/>   若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"/>   若页面需默认用ie标准

  • jquery组件WebUploader文件上传用法详解

    jquery组件WebUploader文件上传用法详解

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法. 使用WebUploader还可以批量上传文件.支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件. 接下来我以图片上传实例,给大家讲解如何使用WebUploader. HTML 我们首先将css和相关js文件加载. <link rel="s

  • Java与WebUploader相结合实现文件上传功能(实例代码)

    之前自己写小项目的时候也碰到过文件上传的问题,没有找到很好的解决方案.虽然之前网找各种解决方案的时候也看到过WebUploader,但没有进一步深究.这次稍微深入了解了些,这里也做个小结. 简单的文件和普通数据上传并保存 jsp页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE h

  • Java中使用WebUploader插件上传大文件单文件和多文件的方法小结

    Java中使用WebUploader插件上传大文件单文件和多文件的方法小结

    一.使用webuploader插件的原因说明 被现在做的项目坑了. 先说一下我的项目架构spring+struts2+mybatis+MySQL 然后呢.之前说好的按照2G上传就可以了,于是乎,用了ajaxFileUpload插件,因为之前用图片上传也是用这个,所以上传附件的时候就直接拿来用了 各种码代码,测试也测过了,2G文件上传没问题,坑来了,项目上线后,客户又要求上传4G文件,甚至还有20G以上的..纳尼,你不早说哦... 在IE11下用ajaxFileUpload.js插件上传超过4G的

随机推荐