文件上传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>   

  

posted @   leagueandlegends  阅读(1613)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示