Plupload设置自定义参数

简介: 在HTML 5比较流行的当下,Plupload是文件上传的不二之选,特别是Adobe宣布2020年将停止对Flash的更新支持。本文记录一下如何在上传文件的时候,传递自定义参数。了解到两种方式,一种是通过 setOption 方法,一种是直接操作对象。

在HTML 5比较流行的当下,Plupload是文件上传的不二之选,特别是Adobe宣布2020年将停止对Flash的更新支持。本文记录一下如何在上传文件的时候,传递自定义参数。

了解到两种方式,一种是通过 setOption 方法,一种是直接操作对象。

uploader.setOption("multipart_params", {
    "post_id"    : 1,
    "post_author" : 2
})

uploader.settings.multipart_params.test_id = 2;
uploader.settings.multipart_params.test_author = "Wang";

参数通过POST请求发送到后端,后台可以根据实际情况获取。

较为完整的代码如下:

var uploader = new plupload.Uploader({
    browse_button : 'rs-uploader',
    url : '/manage/upload',
    chunk_size : '1mb',
    //multipart : true,
    multi_selection : false,
    filters : {
        max_file_size : '10mb',
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
    },
    flash_swf_url : '../js/Moxie.swf',
    silverlight_xap_url : '../js/Moxie.xap',
    preinit : {
            Init: function(up, info) {
                //console.log('[Init]', 'Info:', info, 'Features:', up.features);
            },
 
            UploadFile: function(up, file) {
                //console.log('[UploadFile]', file);
            }
        },
    init : {
        BeforeUpload: function(up, file) {
            console.log('[BeforeUpload]', 'File: ', file);

            //设置参数
            uploader.setOption("multipart_params", {
                "post_id"    : 1,
                "post_author" : 2
            });

            uploader.settings.multipart_params.test_id = 2;
            uploader.settings.multipart_params.test_author = "Wang";
        },
        FilesAdded: function(up, files) {
                // Called when files are added to queue
                console.log('[FilesAdded]');
 
                plupload.each(files, function(file) {
                    console.log('  File:', file);
                });

            uploader.start();
         }
    }
});

uploader.init();
});

plupload 提供了四个控制请求的参数,包括 headers、multipart、multipart_params、max_retries,前三个都是用来传递参数的,但是因为前两个对于 html4 及 flash 的支持问题,我觉得还是使用 multipart_params 比较好。本文使用的 plupload 版本为 2.3.1。

参考资料:
1、前端上传组件Plupload使用指南
2、plupload 设置自定多参数
3、使用plupload实现多文件上传,自定义参数

相关文章
|
存储 文件存储
如何使用Nest.js 上传文件及自定义文件名保存
在 Nest.js 中进行文件上传并自定义文件名保存的过程相对简单
487 0
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3753 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
前端开发
input file上传文件改变默认样式
input file上传文件改变默认样式
91 0
zTree 动态参数上传到服务器
zTree 动态参数上传到服务器
46 0
element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
425 1
element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
|
JavaScript
(巨好使,详细,解析URl,URl自定义传参)js URl中快速自定义传参,并且实现参数解析 修改 和新增,替换功能
我们在日常开发中经常会遇到要对url中的参数进行修改和新增,但是自己手动每次敲就会导致代码很麻烦,且不易维护
341 0
(巨好使,详细,解析URl,URl自定义传参)js URl中快速自定义传参,并且实现参数解析 修改 和新增,替换功能
|
前端开发 JavaScript 内存技术
【前端】页面中调用swf 时allowScriptAccess 参数
使用 allowScriptAccess 使 Flash 应用程序可与其所在的 HTML 页通信。此参数是必需的,因为 fscommand() 和 getURL() 操作可能导致 JavaScript 使用 HTML 页的权限,而该权限可能与 Flash 应用程序的权限不同。这与跨域安全性有着重要关系。
189 0
|
前端开发
bootstrap改变上传文件按钮样式,并显示已上传文件名
参考博文:  html中,文件上传时使用的的样式自定义html中默认样式很丑,这里用了Bootstrap按钮的样式,并获取文件名显示在其右侧 闲话少叙,直接上代码: 任务数据              上传                   未上传文件 function loadFile(file){     $$("#filename").
4799 0
|
JavaScript 容器 前端开发