上传文件 MDB Pro component

文件上传-Bootstrap 5和Material Design 2.0插件

MD Bootstrap的“文件上传”插件是一个扩展,可让您通过使用 拖放功能。易于使用,设置和自定义。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

对于每个具有 data-mdb-file-upload =“ file-upload” 属性的输入,您必须 添加具有 file-upload-wrapper 类的包装器。


默认消息示例

通过添加 data-mdb-default-msg 属性,您可以设置文件的主消息 上载。


自定义高度示例

通过添加 data-mdb-height 属性,您可以设置其自定义高度。


最大尺寸

通过添加 data-mdb-max-file-size 属性,您可以设置文件的最大大小。


默认值

通过添加 data-mdb-default-value 属性,您可以在文件中设置默认文件 上传元素。


禁用

通过添加 data-mdb-disabled 属性,您可以禁用该组件。


接受格式

通过添加 data-mdb-accepted-formats ,您可以设置允许的文件类型。


禁用删除按钮

通过添加 data-mdb-disabled-remove-btn 属性,您可以删除“删除按钮”。


多个文件

通过添加 data-mdb-multiple 属性,您可以上传多个 文件。


多个文件限制

通过添加 data-mdb-max-file-quantity 属性,您可以设置上传限制 文件。

上传文件 - API


用法

通过数据属性


        <div id="dnd" class="file-upload-wrapper">
          <input
            id="file-upload"
            type="file"
            data-mdb-file-upload="file-upload"
            class="file-upload-input"
            data-mdb-main-error="Ooops, error here"
            data-mdb-format-error="Bad file format (correct format ~~~)"
          />
        </div>
      

通过JavaScript


        FileUpload.getInstance(document.getElementById('file-upload')).update({ previewMsg: ...,
        maxSizeError: ... });
      

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

 $('.example-class').fileUpload(); 

选件

Name Type Default Description
acceptedExtensions Array '[]' Allows you to set specific file formats
defaultFile null / string 'null' Allows you set default file
defaultMsg string 'Default message' Changes text of default message
disabled string / boolean 'false' Makes drag and drop disabled
disabledRemoveBtn boolean 'false' Allows you to disabled remove button
formatError string 'Your file has incorrect file format (correct format(s) ~~~)' Changes text of format's error (add '~~~' to show allowed formats)
height null / number 'null' Changes height of dropzone
mainError string 'Ooops, something wrong happended.' Changes text of main error message
maxFileQuantity number 'Infinity' Allows you to upload specific number of files
maxFileSize Infinity / number 'Infinity' Changes allowed file max size
maxSizeError string 'Your file is too big (Max size ~~~)' Changes text of size's error (add '~~~' to show value of max size)
multiple boolean 'false' Allows you to upload more than single file
previewMsg string 'Drag and drop or click to replace' Changes text of file's preview
removeBtn string 'Remove' Changes text of remove button

方法

Name Description Example
dispose Manually removes a drag and drop FileUpload.dispose()
update Manually updates settings in drag and drop FileUpload.update()

For example, to update component


        const fileUpload = document.getElementById('file-upload'); const fileUploadInstance =
        FileUpload.getInstance(fileUpload); fileUploadInstance.update({ multiple: true, });
      

大事记

Name Description
error.mdb.fileUpload This event fires immediately when you upload a file with wrong format or wrong size.
fileAdd.mdb.fileUpload This event fires immediately when a file has been uploaded in to file upload component.
fileRemove.mdb.fileUpload This event fires immediately when a file has been remove from file upload component.

For example, to listen on file add event and get that file:


        const fileUpload = document.getElementById('file-upload');
        fileUpload.addEventListener('fileAdd.mdb.fileUpload', function(e) { const addedFile =
        e.files; });
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { FileUpload } from 'mdb-ui-kit';