写在前面：

　　文件上传方式很多的，对于大文件的上传，在本次项目中也有涉及，主要是用了分片断点上传大文件。所以就去了解了一下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. C语言系列之printf和%12d的用法（三）

    看C语言程序的时候,往往会遇到printf函数输出,在此,我想总结一下printf的一般用法以及%12d是什么意思 printf函数的一般格式为 printf(格式控制,输出列表): 例如: prin ...

  2. Builder模式的思考(Effective Java)

    <Effective Java>(第2版)中第二条中提到:遇到多个构造器参数时要考虑用构建器.在复习static关键字和内部类时回头看了一下,这才明白了为什么要用静态内部类来做处理,这里记 ...

  3. 5）C语言函数（C自考学习）

    函数的概念 在一个程序中,如果在不同地点多次执行某项操作,就可以把完成这项操作的程序段从程序中独立出来,定义成函数,而原来程序中凡需要进行这个操作的程序段可以只用"函数调用"来替代 ...

  4. 关于Could not resolve dependencies for project

    异常:Could not resolve dependencies for project 思路:网上提出的方案思路都是把相互依赖的项目导入到本地仓库中. 目前一劳永逸的方法是:将<packag ...

  5. JavaScript提高篇之预解释作用域以及this原理及其应用

    1.预解释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 离开Visual Studio C#的编译(你不知道的C#)

    很多人一开始学习.net 第一天必定是安装Visual studio 或者很多关于C#学习的书上第一章节必定是告诉你要你下载一个vs 其实没有vs未必就不能开发了,只是可能说vs给我的开发带来了很多的 ...

  7. sql server 2008 r2 登陆时显示无法打开默认的数据库

    解决! 第一步: 远程其他服务器的数据库能连上,本地的数据库某个用户名就是打不开,一开始以为是用户名或者密码错误, 后来用sqlcmd dos命令 -S . -U an -P sa 的方式登陆时可以的 ...

  8. 如何在Windows下用cpu模式跑通py-faster-rcnn 的demo.py

    关键字:Windows.cpu模式.Python.faster-rcnn.demo.py 声明:本篇blog暂时未经二次实践验证,主要以本人第一次配置过程的经验写成.计划在7月底回家去电脑城借台机子试 ...

  9. 浅谈canvas绘画王者荣耀--雷达图

    背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...

  10. JavaScript参考

    要查看英语原文,请勾选"英语"复选框.也可将鼠标指针移到文本上,在弹出窗口中显示英语原文. 翻译 英语 JavaScript 语言参考 JavaScript 是一种可嵌入网页和其他 ...