标签: dropzone

我只是像这样使用我的代码

Dropzone.options.attachkyc = {
            maxFiles: 1,
            accept: function(file, done) {
            console.log("uploaded");
            done();
            },
            init: function() {
                this.on("maxfilesexceeded", function(file){
                    alert("No more files please!");
                });
            },
            addRemoveLinks: true,
            removedfile: function(file) {
                var name = file.name;        
                $.ajax({
                    type: 'POST',
                    url: host+'upload/unfile',
                    data: "id="+name,
                    dataType: 'html'
                });
                var _ref;
                return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;   

                //console.log();
            }
        };

当我上传第二个文件时，显示警报“请不再有文件！”，文件未上传的情况良好，但我的问题是，我添加的第二个文件仍然显示在我的拖放区中。我的问题是在显示警报后如何自动删除第二个文件？

我使用“react-dropzone”来删除文件：

import React from "react";
import { useDropzone } from "react-dropzone";

const DropzoneUpload = ({ onDrop, accept }) => {
  // Initializing useDropzone hooks with options
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept
  });


  return (
    <div {...getRootProps()}>
      <input className="dropzone-input" {...getInputProps()} />
      <div className="text-center">
        {isDragActive ? (
          <p className="dropzone-content">Release to drop the files here</p>
        ) : (
          <p className="dropzone-content">
            Drag 'n' drop some files here, or click to select files
          </p>
        )}
      </div>
    </div>
  );
};

export …

当我上传文件时，我的react-dropzone 'accept': { .. }参数似乎被完全忽略。

我的useDropzone({})：

    const {getRootProps, getInputProps, isDragActive} = useDropzone({
        onDrop,
        noClick: true,
        'accept': {
            'video/mp4': ['.mp4', '.MP4'],
        },
    })

我的onDrop回电：

    const onDrop = useCallback((acceptedFiles, rejectedFiles) => {

        let test =  acceptedFiles.length || rejectedFiles.length
            ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
            : "Try dropping some files.";

        console.log(test);

        if (acceptedFiles.length > 0) {
            setSelectedFiles(acceptedFiles);
        }

        acceptedFiles.forEach((file, index, array) => {

            const reader = new FileReader()

            reader.onabort = (event) => {
                console.log('file reading was aborted') …

谁能帮我告诉我，在 React.js 中通过 React-Dropzone 上传文件时如何知道本地文件路径？

我在很长一段时间内遇到了 react-dropzone 的问题。

首先，让我们直接跳到视频的问题：https : //drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os

文件选择器窗口在我网站的每个文件输入上打开两次，它不是无限循环，只是两次。

这是我用于此 dropzone 的代码：

                    <Dropzone onDrop={this.onDrop.bind(this)}
                              key={this.state.key}
                              style={{border: "none"}}>
                        <div className="input-file">
                            <label for="file">
                                <button type="button">Choisissez un fichier</button>
                            </label>
                        </div>
                        <div className={"file-name " + (!this.state.selectedOption ? '' : 'hidden')}>
                            Aucun fichier choisi
                        </div>
                        <div className={"file-name " + (this.state.selectedOption ? '' : 'hidden')}>
                            {this.state.selectedOption}
                        </div>
                    </Dropzone>

每次我放下甚至点击输入本身时都会发生不需要的事件

如果希望给你们足够的信息，如果你需要更多，我会很乐意分享代码。

我正在尝试将 dropzone 集成到我的 Symfony 4.1 项目中，但我遇到了麻烦。

我通过 npm: 将 dropzone 添加到我的项目中npm install dropzone。

在assets/app.js 中，我需要 dropzone：

'use strict';

require('../css/app.css');

// create global $ and jQuery variables
import('jquery');

require('bootstrap');

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');
require('dropzone/dist/min/dropzone.min.js');

require('./main.js');  // assets/js/main.js

在main.js 中，我只是尝试添加该函数：

Dropzone.autoDiscover = false;

一旦我尝试为 dropzone 进行一些配置，我的浏览器控制台就会发疯：未定义 Dropzone。

我问自己这里有什么问题。

谢谢你的帮助！

我一直在尝试在dropzone.js中上传之前重命名文件名，但是我无法使其工作。这是我的配置：

Dropzone.autoDiscover = false;
Dropzone.options.myAwesomeDropzone = {
    url: url,
    paramName: "image",
    dictDefaultMessage: 'Selecciona tus archivos..',
    dictRemoveFile: "Eliminar",
    dictCancelUpload: "Cancelar carga",
    addRemoveLinks: true,
    uploadMultiple: false,
    renameFile: function (file) {
        console.log(file.name);
        file.name = new Date().getTime() + '_' + file.name;
    },
    new Dropzone("div#my-awesome-dropzone");

当它上传时，js控制台中什至没有任何显示，并且文件名仍然相同

有人经历过这个吗？

我尝试了以下解决方案：Dropzone.js-如何在上传到文件夹之前更改文件名

在 Linux 和 macOS 上运行、测试和调试时 - 标准浏览器文件选择器很乐意接受 MIME 类型“text/csv”来过滤要使用 DropZone 上传的 CSV 文件。

Windows 10（即使使用 Chrome）和 ChromeOS（当然还有 Chrome）对此并不满意。

我想使用 IFormFile 上传数据库中的一些文档。在客户端，我使用 Dropzone.js 但它无法正常工作。每当我点击“提交”按钮时，它都会在参数中发送一个空值。我有两个疑问。1. 如何将文档（图像/PDF）发送到操作方法。2. 如何重新设计（改变风格）Dropzone。（如果有人解释 dropzone 的流程那么它将非常有用）

这是我的 HTML 代码

<form asp-action="AddDocument" asp-controller="Transactions" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
    <div class="form-group form-actions">
        <div class="col-md-9 col-md-offset-4">
            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
        </div>
    </div>
</form> 

JS代码：

$(function () {
            Dropzone.options.dropzoneForm = {
                paramName: "DocumentPhotos", // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                accept: function (file, done) {
                    done();
                }
            };
        });

这是我的服务器端语言代码：

        [HttpPost]
        public async Task<IActionResult> AddDocument(IEnumerable<IFormFile> …

我正在尝试创建一个页面，用户可以在其中添加标题，然后上传图像或 2。我正在使用 dropzone 和 Laravel，我试图让它看起来不同，我让它看起来像http:// www.dropzonejs.com/bootstrap.html

我遇到的问题是我需要向 js 文件添加一个 url，但它一直给我这个错误

POST http://crud.test/portfolios 419（状态未知）

并在我的开发工具中的预览中

{消息：“”，异常：“Symfony\Component\HttpKernel\Exception\HttpException”，...}

我知道在 Laravel 中我会使用

{{ csrf_field() }}

并且我无法将图像上传到我在控制器中指定的文件夹或将图像保存到我的数据库中。

我想要的是如何让我的图像上传到文件夹并保存到我的数据库。

我的刀片：

<form action="{{ route('portfolios.store') }}">
    {{ csrf_field() }}

    <div class="form-group">
        <label>Title</label>
        <input type="title" name="title" class="form-control">
    </div>

    <div id="actions" class="row">
        <div class="col-lg-7">
            <span class="btn btn-success fileinput-button dz-clickable">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
            </span>

            <button type="button" class="btn btn-info start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start upload</span>
            </button>

            <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel upload</span>
            </button>
        </div>

        <div …