Uploader 上传插件示例用法和更新传递传输方法

最新推荐文章于 2025-11-16 12:51:42 发布

原创最新推荐文章于 2025-11-16 12:51:42 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uploader上传 #uploader插件 #上传插件用法 #uploader更新传递参数 #上传

js 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何利用Uploader插件进行文件上传功能的开发，包括配置上传参数、设置文件大小及类型限制，并演示了如何处理上传过程中的各种事件。

废话不多说，直接上代码；使用Uploader 插件示例如下。

html需引入plupload.full.min.js

博客园插件文档任意门

            var uploader = new plupload.Uploader({ //创建实例
                runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
                browse_button: 'btn', // 上传按钮
                url: UploadUrl, //上传地址
                filters: {
                    max_file_size: '2mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
                    mime_types: [ //允许文件上传类型
                        {
                            title: "files",
                            extensions: "png,jpg"
                        }
                    ]
                },
                //multipart_params 提前定义变量会无法改变，可通过 setOption 方法改变参数 底部例子
                multipart_params:{
                    uploadType:13,
                    wnumber:"12312343242342"
                },
                multi_selection: false, //true:ctrl多文件上传, false 单文件上传
                init: {
                    FilesAdded: function(up, files) { //文件上传前
                        
                        uploader.start();
                        
                    },
                    FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                        var data = eval("(" + info.response + ")");
                       //处理成功后的图片
      
                    },
                    Error: function(up, err) { //上传出错的时候触发
                   
                        if(err.code == -600 && err.message == "File size error."){
                            bootbox.alert({
                                size: "small",
                                title: "提示",
                                message: "上传文件已超出限制"
                            });
                        }else{
                            bootbox.alert({
                                size: "small",
                                title: "提示",
                                message: err.message
                            });
                        }
                        
                    }
                }
            });
            uploader.init();

           $("#result").on("click",".div",function(){
               var appealType = $(this).attr("type");
               var wnumberStr = $(this).attr("wnumber");
               //通过setOption 改变传递参数
               uploader.setOption("multipart_params", {
                 uploadType:appealType,
                 wnumber:wnumberStr
               })
           })