文件上传plupload组件使用
这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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初始化完成后触发<br> 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的部分按钮如下:
1 2 3 4 5 6 7 | <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> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)