这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码。

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组件使用的更多相关文章

  1. chunkupload文件上传断点续传组件(java)

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. 从整体上讲,chunkupload会对文件进行切片处理,每个切片 ...

  2. chunkupload 文件上传断点续传组件(java) - 正式发布

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: ·  实现断点续传 ·  ...

  3. asp 文件上传(ASPUpload组件上传)

    要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload   要实现该功能,就要利用一些特制的文件上传组件 ...

  4. java基础篇---文件上传(smartupload组件)

    文件上传几乎是所有网站都具有的功能,用户可以将文件上传到服务器的指定文件夹中,也可以保存在数据库中,本篇主要说明smartupload组件上传. 在讲解smartupload上传前,我们先来看看不使用 ...

  5. flash文件上传下载组件

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  6. js文件上传下载组件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  7. asp.net文件上传下载组件

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  8. java文件上传下载组件

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...

  9. asp 文件上传(无组件上传)

    文件1.上传界面文件 upload.htm<html><head><meta http-equiv="Content-Language" conten ...

随机推荐

  1. Unable to execute command or shell on remote system: Failed to Execute process

    1.问题描述 先说下我的项目环境:jenkins部署在windows下面,项目部署也是在windows下面,ssh服务器是FreeSSHd,原来是打算用Send files or execute co ...

  2. Nginx出现403 forbidden

    我装在linux上的nginx版本是1.16 当我在nginx/conf/nginx.conf文件里配置完代理 location /ds { root /home/nginx; index index ...

  3. 常用的一些git命令整合

    一.创建一个版本库 1.mkdir xxx 2.git init 使用git init命令将这个目录变成Git可以管理的仓库 这个版本仓库创建好了,xxx目录下有一个隐藏的.git目录(里面有暂存区( ...

  4. 题解 P5718 【【深基4.例2】找最小值】

    题目传送门 思路 介绍一种新方法--sort排序,它的格式是这样的sort(a+1,a+n+1,cmp);,我们只需要把a数组排好序,然后输出第\(1\)个元素即可. 定义a数组与变量\(n\)并输入 ...

  5. pytest+requests+Python3.7+yaml+Allure+Jenkins+docker实现接口自动化测试

    接口自动化测试框架(用例自动生成) 项目说明 本框架是一套基于pytest+requests+Python3.7+yaml+Allure+Jenkins+docker而设计的数据驱动接口自动化测试框架 ...

  6. 深入浅出Mybatis系列八-mapper映射文件配置之select、resultMap

    注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之inse ...

  7. C#调用C++类库例子

    一.新建一个解决方案,并在解决方案下添加一个.netframework的项目,命名为FrameworkConsoleTest.再添加一个C++的动态链接库DLL项目,命名为EncryptBase. 二 ...

  8. 强烈推荐一款强大的公式编辑器软件AxMath

    Axmath教程请移步:https://www.cnblogs.com/coco56/p/11759578.html

  9. BZOJ-2424: [HAOI2010]订货【费用流】

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1487  Solved: 1002[Submit][Status][Discuss] Descript ...

  10. Python之路Day08

    文件操作 open() -- 打开 open通过Python控制操作系统打开文件 f=open('文件路径',mode='r',encoding='utf-8') mode -- 不写就默认是r f ...