jQWidgets jqxFileUpload 接受属性介绍

jQWidgets jqxFileUpload 是一个基于 jQuery 的上传组件，它提供了丰富的 API 和配置选项来满足上传文件的需求。在使用 jQWidgets jqxFileUpload 进行文件上传时，我们可以通过配置一些属性来控制上传的行为和效果。下面就是 jQWidgets jqxFileUpload 支持的一些属性及用法介绍。

可选属性

accept

• 数据类型：字符串类型
• 默认值：空字符串
• 用法：指定需要上传的文件类型，支持多种类型，用逗号分隔，例如 "image/*,.pdf"。如不指定文件类型，则允许上传所有类型的文件。

browseTemplate

• 数据类型：字符串类型
• 默认值：默认浏览按钮样式
• 用法：指定浏览按钮的 HTML 模板，使浏览按钮的样式和功能可以自定义。可以使用 jQWidgets 的模板引擎语法，例如：

<div id="fileUpload"></div>
<script id="browseTemplate" type="text/x-jqx-template">
    <div class="browse-button">${Localization.BrowseButton}</div>
</script>
<script>
$('#fileUpload').jqxFileUpload({
    browseTemplate: $('#browseTemplate').html()
});
</script>

cancelTemplate

• 数据类型：字符串类型
• 默认值：默认取消按钮样式
• 用法：指定取消按钮的 HTML 模板，使取消按钮的样式和功能可以自定义。

dragDrop

• 数据类型：布尔类型
• 默认值：false
• 用法：启用拖拽上传功能。当设置为 true 时，用户可以直接将文件拖拽至上传控件区域进行上传，非常方便。

fileInputName

• 数据类型：字符串类型
• 默认值：undefined
• 用法：自定义文件上传的参数名，当上传文件时会将文件作为该参数名对应的值上传至后台。例如，设置为 "myFileInput" 后，后台想要接收上传的文件需要使用 "myFileInput" 作为参数名。

height

• 数据类型：字符串类型
• 默认值：undefined
• 用法：设置上传控件的高度，可以使用像素或百分比。例如，设置为 "200px" 或 "50%"。

localization

• 数据类型：对象类型
• 默认值：{ BrowseButton: 'Browse...', UploadButton: 'Upload', CancelButton: 'Cancel', UploadFileTooltip: 'Upload File', CancelFileTooltip: 'Cancel File', CloseTooltip: 'Close', UploadAllTooltip: 'Upload All', CancelAllTooltip: 'Cancel All' }
• 用法：指定上传控件的本地化语言。例如：

$('#fileUpload').jqxFileUpload({
    localization: {
        BrowseButton: '选择文件',
        UploadButton: '上传',
        CancelButton: '取消'
    }
});

multipleFilesUpload

• 数据类型：布尔类型
• 默认值：true
• 用法：启用多文件上传功能。当设置为 true 时，用户可以一次选择多个文件进行上传。

rtl

• 数据类型：布尔类型
• 默认值：false
• 用法：启用从右向左的布局，适用于从右向左排版的场景。

theme

• 数据类型：字符串类型
• 默认值：'classic'
• 用法：指定上传控件的主题，内置多种主题可供选择。

示例代码

<div id="fileUpload"></div>

<script id="browseTemplate" type="text/x-jqx-template">
    <div class="browse-button">${Localization.BrowseButton}</div>
</script>

<script>
$('#fileUpload').jqxFileUpload({
    accept: "image/*,.pdf",
    browseTemplate: $('#browseTemplate').html(),
    cancelTemplate: "<div class='cancel-button'>取消</div>",
    dragDrop: true,
    fileInputName: "file",
    height: "200px",
    localization: {
        BrowseButton: '选择文件',
        UploadButton: '上传',
        CancelButton: '取消'
    },
    multipleFilesUpload: true,
    rtl: true,
    theme: 'light'
});
</script>

以上是 jQWidgets jqxFileUpload 支持的一些属性及用法介绍，通过这些属性的配置，我们可以实现自定义浏览按钮、取消按钮、拖拽上传、多文件上传等各种功能。