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

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>

  

最新文章

  1. UWP学习记录8-设计和UI之控件和模式5
  2. vm网络设置
  3. Mysql连接到Visual studio注意
  4. 如何订阅Form的自定义事件
  5. Oracle job procedure 存储过程定时任务
  6. [LeetCode] Additive Number
  7. Entity Framework 第七篇 简化排序
  8. 解决:mvn archetype:create Abstract class or interface &#39;org.apache.maven.artifact.repository.ArtifactRepository&#39; cannot be instantiated
  9. ASP.NET MSSQL 依赖缓存设置方法
  10. Unit Test with VS.NET
  11. 我的一点关于把WndProc指向类的成员函数的看法
  12. TCP之Socket的编程
  13. MINA快速传输文件
  14. after I see Little Dorrit
  15. c中的可重入和不可重入函数
  16. python 每日一练: 读取log文件中的数据,并画图表
  17. mybatis——分页插件
  18. [NOIp 2014]飞扬的小鸟
  19. Web前端-Vue.js必备框架(五)
  20. 深入解析Java反射基础

热门文章

  1. [PAT] A1021 Deepest Root
  2. JavaDay9(上)
  3. easyUI footer 的格式渲染
  4. JS 百度地图路书---动态路线
  5. Vue前端挂载对象时一些思考
  6. 第四十九篇 入门机器学习——数据归一化(Feature Scaling)
  7. [Python]jieba切词 添加字典 去除停用词、单字 python 2020.2.10
  8. (转)java中新生代和老年代
  9. JS的冒泡事件
  10. SequoiaDB报告创建线程失败的解决办法