写在前面：

　　文件上传方式很多的，对于大文件的上传，在本次项目中也有涉及，主要是用了分片断点上传大文件。所以就去了解了一下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="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上传文件（一）的更多相关文章

  1. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  2. webuploader 上传文件参数设置

    webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数 ...

  3. webuploader+上传文件夹

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  4. webuploader上传文件，图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  5. 百度文件上传webuploader上传文件，含文件大小、类型验证

    你的上传初始化文件upload_XXX.js中:(见红色字) // 初始化Web Uploader var allMaxSize = 10; var uploader = WebUploader.cr ...

  6. WebUploader 上传文件 错误总结

    近日做文件上传,粗心的问题和技术不精的问题导致了很多的bug,大部分时间都是在找自己写出来的bug,近日总结一下使用 WebUploader 开启分片上传的使用方法以及注意事项 1.上传过程中,后续上 ...

  7. 浅谈webuploader上传文件

    官网:http://c7.gg/fw4sn 案例: 文件上传进度 // 文件上传过程中创建进度条实时显示. uploader.on( 'uploadProgress', function( file, ...

  8. WebUploader分片断点上传文件（二）

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...

  9. 使用WebUploader上传HTML文件并读取文件

    需求: 前端需要上传HTML文件并识别里面有多少个特殊标签并录入到数据库. 思路: 使用WebUploader上传文件,然后使用FileReader接口和DOMParser识别HTML中的特殊标签 资 ...

随机推荐

  1. Python之re模块（结合具体业务）

    1.判断数据库名是否合法 import re dbname = "test_" result = re.match("[a-zA-Z_0-9]{1,}$",db ...

  2. 前端设计师如何提高UI界面中的阅读性

    阅读体验是ui设计中必不可少的一项,良好的设计应该都是可读的设计,如果信息都无法正常而清晰的传达,那么设计就失去了意义.设计的可读性和排版设计息息相关,这也就跟设计师的设计功底息息相关.下面简单介绍文 ...

  3. Python 学习之路

    这个是我学python以来,写的的第一个小游戏,写的不好 题目:石头剪刀布 主要有两个难度 在普通模式,电脑是随机出 在噩梦下,就是不管你出什么,电脑都会赢你,牛逼吧 #Author:陈浩彬 impo ...

  4. 关于Excel数据批量导入数据库的案例

    写这个案例主要是感觉这个功能挺实用,很多地方会用得到的,废话就不多说了,直接上对应的源码. 这个案例我运用的是Winform窗体程序实现数据的导入. 首先是数据库的登陆界面如下: 源码如下: usin ...

  5. Winform控件Tag使用规范

    背景 Tag在WinForm控件中经常被用来存储临时数据,类型为object,但是当程序中多个地方使用到Tag时,容易造成Tag使用的混乱,Tag是如此重要的一个属性,应该要好好考虑下如何有效的使用T ...

  6. Unity灯光烘焙

    Unity3D烘焙技术 一.Light灯光场景烘焙1.理论理解:(1)烘焙背景:在一个场景中,由于灯光组件起到实时渲染的效果,并直接与计算机硬件GPU渲染器进行交互作用,因此对计算机显卡性能不良,以至 ...

  7. 移动GIS在企业各个行业中的应用解决方案

    “移动GIS的设备厂商越来越多地关注行业用户的需求,所以移动GIS的市场前景是非常广阔的.当前国内移动GIS,已广泛应用于测绘.国土.环境.水利.农业.林业和矿产等传统资源管理领域和城市规划方面.在应 ...

  8. Batch Normalization

    一.BN 的作用 1.具有快速训练收敛的特性:采用初始很大的学习率,然后学习率的衰减速度也很大 2.具有提高网络泛化能力的特性:不用去理会过拟合中drop out.L2正则项参数的选择问题 3.不需要 ...

  9. python-02 数据类型、字符编码、文件处理

    标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) 数字 #整型 ...

  10. 数据库介绍（MySQL安装 体系结构、基本管理）

    第1章 数据库介绍及mysql安装 1.1 数据库简介 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增.截取.更新.删除等操作. 所谓“数据库”系以一定方式 ...