Question

我有一个DropZone表单完美地处理了一个例外，我似乎无法像我需要的那样精确地限制文件类型。

使用acceptedFiles: "image/*"调暗所有非图像的文件夹和文件类型。虽然包含 TIFF ，但我需要将其简化为 JPG 和 PNG 。很多反复试验并没有让我在那里。

我尝试了什么：

acceptedFiles: "image/jpg"
acceptedFiles: ".jpeg,.jpg,.png"
acceptedFiles: "image/jpg,png"

但他们都会让一切都可以选择。

JPG 和 PNG 的正确格式是什么？

Answer 1

更多的试验和错误最终出现了解决方案：

Dropzone.options.dzone = {
acceptedFiles: "image/jpeg,image/png,image/gif"
}

显然我的错误主要在于使用jpg，这使得它全部失败。上面的作品就像一个魅力。

Answer 2

我认为你也应该从控制器验证它。

$this->validate($request, [

        'file' => 'required|mimes:jpg,jpeg,png,bmp']

    );

Answer 3

<Dropzone
   onDrop={this.handleFilesUpload}
   >
   {({ getRootProps, getInputProps }) => (
   <div {...getRootProps()}>
   <input
   {...getInputProps()}
   accept=".csv" /*you can use any file type */
   />
   <div className="drag-container">
      <img
         className="drag-img"
         src={Drag}
         alt="drag-img"
         />
      <p className="drag-container-para">Drop files here, or click to select files</p>
   </div>
   </div>
   )}
</Dropzone>

Answer 4

就我而言，我还想从上下文框中隐藏不需要的文件类型。我不得不添加“acceptedMimeTypes”，尽管在文档中它显示为折旧。

acceptFiles: 'image/jpeg,image/png,image/gif,image/jpg',
acceptedMimeTypes: 'image/jpeg,image/png,image/gif,image/jpg',

DropZone acceptedFiles类型过滤器

4 个答案: