Question

我愿意实施一个dropzone来上传图像和pdf文件。有两个文件字段按钮。一个应该只上传图像，另一个应该只上传pdf文件。

我给的最佳镜头是：

myDropzone = new Dropzone("#drop-zone", {
        url: "/file/post",
        acceptedFiles: "image/*",
        init: function () {
            this.options.acceptedFiles = '.pdf'
        });

$('#add_custom_logo_button, #add_pdf_file_button').on('click', (e) => {
        e.preventDefault();
        component.setState({acceptFiles: $(this).data('file-accepts')});
    });

HTML元素：

<div id="drop-zone" className="dropzone" data-file-accepts={this.state.acceptFiles}/>
<label class='control-label' for='add_custom_logo'>Custom Logo Image</label>
<button type='button'id='add_custom_logo_button' data-file-accepts="image/*"></button>
<div>
 <label class="control-label for="add_custom_logo" data-file-accepts="application/pdf">PDF File</label> 
 <label class="label-button" id="add_pdf_file_button">
   <span>Upload File </span>
 </label>
</div>

在这里acceptFiles是我提到的组件状态中的一个选项。如何限制每个文件字段接受的文件类型？

Answer 1

我认为您需要创建两个不同的dropzone区域，并根据需要将接受的文件分配给每个文件。为了只允许使用图片并考虑所有格式，我认为此选项会更好。

acceptedFiles: '.png,.jpg,.jpeg',

希望有帮助。

React JS中的Dropzone

1 个答案: