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实现多文件上传,自定义参数

相关文章
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3287 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
16天前
|
前端开发
elementui_上传组件方法自定义(formData)
elementui_上传组件方法自定义(formData)
6 1
|
6月前
|
前端开发
input file上传文件改变默认样式
input file上传文件改变默认样式
48 0
|
7月前
zTree 动态参数上传到服务器
zTree 动态参数上传到服务器
20 0
|
9月前
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
116 0
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
4144 0
|
11月前
【Element-ui】每个类只有一个默认设置选项
【Element-ui】每个类只有一个默认设置选项
【Element-ui】每个类只有一个默认设置选项
element使用el-upload组件实现自定义方法上传图片或者文件
element使用el-upload组件实现自定义方法上传图片或者文件
181 0
element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
343 1
element使用el-upload组件实现自定义方法上传图片或者文件(配有详细注释)
|
前端开发 JavaScript 内存技术
【前端】页面中调用swf 时allowScriptAccess 参数
使用 allowScriptAccess 使 Flash 应用程序可与其所在的 HTML 页通信。此参数是必需的,因为 fscommand() 和 getURL() 操作可能导致 JavaScript 使用 HTML 页的权限,而该权限可能与 Flash 应用程序的权限不同。这与跨域安全性有着重要关系。
138 0