文件上传plupload组件使用
这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码。
var uploader = new plupload.Uploader(
{
//用来指定上传方式,指定多个上传方式请使用逗号隔开,默认即为此,可不写
runtimes : 'html5,flash,silverlight,html4',
//点击上传html标签的id,可以是a,button等
browse_button : 'hideBtn',
//服务器端的页面上传地址
url : url,
//文件的最大上传大小,不写该参数则上传文件大小无限制
max_file_size : '20mb',
//设置多项选择,默认为true,即可多选文件,功能为单选时需将此设为false
multi_selection : true,
//上传的文件生成一个唯一的文件名,默认为false,false时上传文件为本身的名字,true时自动生成其他名字
unique_names : true,
//可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入
filters : [
{title: "Image files", extensions: "jpg,gif,png,jpeg"},
{title: "Zip files", extensions: "zip"},
{title: "file files", extensions: "doc,docx,xls,xlsx,ppt,pptx,txt,pdf"}
],
//flash地址,swf文件,当需要使用swf方式进行上传时需要配置该参数
flash_swf_url : '../../../../sikns/js/Moxie.swf',
//silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
silverlight_xap_url : '../../../../sikns/js/Moxie.xap',
//当Plupload初始化完成后触发
init : {
//文件上传前触发
BeforeUpload : function(up, file){
/*事先做个校验,违反校验的情况下,将文件上传传输组件暂停*/
/*up.stop();
up.removeFile(file);*/
}
},
//当文件添加到上传队列后触发(up为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象)
FilesAdded : function(up, files) {
/*plupload.each(files,function(file) {
document.getElementById('filelist').value += file.name+";";
});*/
//开始上传队列中的文件
uploader.start();
},
//会在文件上传过程中不断触发,可以用此事件来显示上传进度(up当前的plupload实例对象,file为触发此事件的文件对象)
UploadProgress : function(up, file) {
},
//传输完成后添加事件
UploadComplete : function(up,files){
}
}
});
//初始化Plupload实例
uploader.init();
这段代码是文件上传的js部分,里面各个部分的函数注解的很清楚。
调用这个js的部分按钮如下:
<div class="input-group" style="width: 100%">
<input class="form-control ue-form" id="filelist" type="text" placeholder="选择上传文件" readonly>
<div class="input-group-addon ue-form-btn" id="inputfiles">
<span class="fa fa-upload"></span>
</div>
<button id="hideBtn"></button>
</div>
文件上传plupload组件使用的更多相关文章
- chunkupload文件上传断点续传组件(java)
chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. 从整体上讲,chunkupload会对文件进行切片处理,每个切片 ...
- chunkupload 文件上传断点续传组件(java) - 正式发布
chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: · 实现断点续传 · ...
- asp 文件上传(ASPUpload组件上传)
要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上传组件 ...
- java基础篇---文件上传(smartupload组件)
文件上传几乎是所有网站都具有的功能,用户可以将文件上传到服务器的指定文件夹中,也可以保存在数据库中,本篇主要说明smartupload组件上传. 在讲解smartupload上传前,我们先来看看不使用 ...
- flash文件上传下载组件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- js文件上传下载组件
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- asp.net文件上传下载组件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- java文件上传下载组件
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...
- asp 文件上传(无组件上传)
文件1.上传界面文件 upload.htm<html><head><meta http-equiv="Content-Language" conten ...
随机推荐
- js image to base64 摘录
//传入图片路径,返回base64 //用处,由于在新增时,使用的是base64的格式,为了统一,在编辑时,也将图片转为base64,以便于统一处理 /* 使用: 因为图像处理存在一定的延时,所以通过 ...
- Rtudio 安装包报错
今天重新安装了一下Rstudio,基本上很多包都安装不上,问了度娘发现被墙了 f..k.. 解决办法,更改安装包的镜像为清华镜像 tools->gloabl options->packag ...
- wxpython学习:创建最小的空的wxPython程序
frame = wx.Frame(parent=None, title=’Bare’) frame.Show() return True app = App() app.MainLoop() 上面的代 ...
- Chrome 浏览器相关
********* 问题 ********* localhost 通常会使用加密技术来保护您的信息.Google Chrome 此次尝试连接到 localhost 时,此网站发回了异常的错误凭据.这可 ...
- linux100讲——80 系统函数库介绍
1.系统自建了函数库,可以在脚本中引用 /etc/init.d/functions 2.自建函数库 使用 source 函数脚本文件 “导入”函数 3. vim /etc/init.d/functio ...
- MySQL数据库渗透及漏洞利用总结
Mysql数据库是目前世界上使用最为广泛的数据库之一,很多著名公司和站点都使用Mysql作为其数据库支撑,目前很多架构都以Mysql作为数据库管理系统,例如LAMP.和WAMP等,在针对网站渗透中,很 ...
- 基于Python接口自动化测试框架+数据与代码分离(进阶篇)附源码
引言 在上一篇<基于Python接口自动化测试框架(初级篇)附源码>讲过了接口自动化测试框架的搭建,最核心的模块功能就是测试数据库初始化,再来看看之前的框架结构: 可以看出testcase ...
- 【安卓开发】Webview简单使用
什么是WebView? 答:Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上 ...
- Web基础-Uri跟Url的区别
关于URL和URI的区别,个人见解. 初学java,最近被一个概念搞得头晕脑胀,就是url和uri的概念和区别,网上查了一大通,发现各种回答眼花缭乱,有百科直接粘贴的,有胡说八道的,有故意绕来绕 ...
- Javascript数组与字符串常用api
目录 javaScript(api学习) 数组有关的api 创建数组 数组的增删改查 indexOf(); push(),pop(),unshift(),shift() forEach() map() ...