欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用WebUploader实现上传文件功能(一)

程序员文章站 2023-12-10 18:57:10
写在前面:   文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件。所以就去了解了一下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中,都谈不上有什么逻辑,也不是很完整。因为项目不同,业务流程也不同,故可以先入门,后续根据自己的需求,进行添加的。

运行截图:

  使用WebUploader实现上传文件功能(一)

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

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