知识点:利用WebUploader,实现文件批量上传,并且实时显示文件的上传进度

参考官方文档:http://fex.baidu.com/webuploader/

(1)引入三个资源 JS,CSS,SWF

webuploader.jswebuploader.css,Uploader.swf

(2)初始化Web Uploader
uploader = WebUploader.create({

    // swf文件路径
swf: '/static/swf/Uploader.swf', // 文件接收服务端接口
server: '/screen/upload', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: {
//picker为页面上传文件按钮 div的id名称
id:'#picker',
//是否允许单次上传时同时选择多个文件
multiple:true
},
//[可选] [默认值:undefined] 验证文件总数量, 超出则不允许加入队列。
//上传文件总数限制
fileNumLimit: 20,
//fileSingleSizeLimit {int} [可选] [默认值:undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列
//上传的单个文件大小限制
//500M,暂时针对视频(字节为单位)
fileSingleSizeLimit:500*1024*1024,
method:'POST',
//允许上传文件的类型
accept: {
title: 'file',
extensions: 'jpg,bmp,png,mp4,flv'
}, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
//可否可以重复上传相同文件(如果为true,则相同文件可以重复上传)
duplicate: true
}); (3)上传进度,成功失败事件,可参考官方demo,或者本人demo,在原基础上修改

使用WebUploader实现文件批量上传,进度条显示功能的更多相关文章

  1. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  2. 文件批量上传的工具,要实现暂停继续、断点续传等功能(使用QtNetwork和QHttpMultiPart,和定时器检查超时)

    最近在做一个文件批量上传的工具,要实现暂停继续.断点续传等功能.利用Qt自带的QtNetwork模块,完成这些需求并没有费多少周章,主要思路就是将文件分块,然后用while循环依次传输.具体实现代码比 ...

  3. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  4. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  5. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  6. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  7. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  8. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

  9. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

随机推荐

  1. access join形式删除数据

    --注意distinctrow关键字 delete distinctrow a.* from aa a inner join bb b on a.id= b.id  

  2. 4.GIT安装

    最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Window ...

  3. 009-Hadoop Hive sql语法详解4-DQL 操作:数据查询SQL-select、join、union、udtf

    一.基本的Select 操作 语法SELECT [ALL | DISTINCT] select_expr, select_expr, ...FROM table_reference[WHERE whe ...

  4. Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  5. Shiro起步

    1.测试环境  IntelliJ Idea 2.pom配置 <?xml version="1.0" encoding="UTF-8"?> <p ...

  6. (转)VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径说明

      $(RemoteMachine) 设置为“调试”属性页上“远程计算机”属性的值.有关更多信息,请参见更改用于 C/C++ 调试配置的项目设置. $(References) 以分号分隔的引用列表被添 ...

  7. socketserver 并发连接

    socketserver.TCPServer Example server side 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  8. The Cheap KD 10 is my best shoe yet

    10 years of anything is fairly huge Cheap KD 10, but adding something as great as Flyknit causes it ...

  9. Look for this newest GS Jordan 6 Floral

    Named 'Bulls Over Broadway' and 'Gym Red', the most recent variation from the New Jordans 2015 is fo ...

  10. Java分布式:消息队列(Message Queue)

    Java分布式:消息队列(Message Queue) 引入消息队列 消息,是服务间通信的一种数据单位,消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.队列,是一种常见的数据结 ...