标签: dropzone

当我在 dropzone 中上传文件时，它不起作用。通常它工作得很好，但自 1 个月以来我有这个 JS 错误：

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

那是代码，当我使用 FormData 时：

 var form_data = new FormData("#my-awesome-dropzone");

多区码

  Dropzone.options.myAwesomeDropzone = {
    maxFilesize: 5,
    maxFiles: 1,    
    addRemoveLinks: true,
    dictResponseError: 'Server not Configured',
    acceptedFiles: ".pdf",
    init:function(){
      var self = this;
      // config
      self.options.addRemoveLinks = true;
      self.options.dictRemoveFile = "Delete";
      //New file added
      self.on("addedfile", function (file) {
          console.log('new file added ', file);
             if(!confirm("Do you want to upload the file?")){
                this.removeFile(file);
                return false;
            } …

我想在我的dropzone文件上传器上添加一个按钮上传.目前,在选择或拖动文件到dropzone区域后,它会直接上传文件.我想要做的是:1.选择或暂停要上传的文件.2.验证3.点击或按下上传按钮上传文件.

注意:只有在按下按钮上传后才会上传文件.

这是我的表格

<form id='frmTarget' name='dropzone' action='upload_files.php' class='dropzone'>
   <div class='fallback'>
      <input name='file' type='file' multiple />
   </div>
   <input id='refCampaignID' name='refCampaignID' type='hidden' value=\ "$rowCampaign->CampaignID\" />
</form>

这是我的JS

Dropzone.options.frmTarget = 
    {
            url: 'upload_files.php',
            paramName: 'file',
            clickable: true,
            maxFilesize: 5,
            uploadMultiple: true, 
            maxFiles: 2,
            addRemoveLinks: true,
            acceptedFiles: '.png,.jpg,.pdf',
            dictDefaultMessage: 'Upload your files here',
            success: function(file, response)
            {
                setTimeout(function() {
                    $('#insert_pic_div').hide();
                    $('#startEditingDiv').show();
                }, 2000);
            }
        };

这是我的php帖子请求

 foreach ($_FILES["file"] as $key => $arrDetail) 
   {
      foreach ($arrDetail as $index => $detail) {
         //print_rr($_FILES["file"][$key][$index]);
         $targetDir = "project_images/"; …

如何销毁dropdzonejs？

当我有 SPA 并离开页面时，我想清理一下，这样它就不再听身体事件了。

我已经阅读了很多关于此的答案，并且大多数建议使用该acceptedFiles属性来指定接受的 mime 类型。

但是，DropZone 文档说：

Mime 类型确定跨平台不可靠。例如，CSV 文件在 macOS 下报告为 text/plain，但在 Windows 下报告为 application/vnd.ms-excel。在某些情况下，可能根本没有设置 MIME 类型。

我正在尝试上传 .csv 文件，并且（使用material-ui-dropzone），到目前为止我已经尝试过：

  <Dropzone
    acceptedFiles={['.csv', 'text/*']}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

  <Dropzone
    acceptedFiles={'.csv', 'text/*'}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

  <Dropzone
    acceptedFiles={'.csv', 'text/csv'}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

...等，但到目前为止还没有工作：

• 打开文件对话框将文件显示.csv为灰色
• 将.csv文件拖放到 DropZone 会得到“文件 SeriesNotes.csv 被拒绝。不支持文件类型”。信息

为material-ui-dropzone（或任何版本的 DropZone）解决这个问题的正确方法是什么？

我目前正在使用 Material Ui dropzone 上传多个文件。只是想知道在 redux 存储中添加/更新文件的最佳方法是什么。我目前正在执行“onChange”触发时的调度操作，该操作返回 dropzone 上的所有文件并通过存储具有 files 对象的整个 files 数组来更新 redux 状态。

请让我知道是否有最好的方法来处理这个问题。

我正在尝试在我的代码中使用 react-dropzone 并使用 axios 向服务器发出 POST 请求，但是 POST 请求总是失败并且我不断收到以下错误：

未捕获（承诺）错误：请求失败，状态码为 500

这是我的组件

constructor(props) {
  super(props);
  this.state = {
    accepted: [],
  };

  ['handleChange', 'handleValidSubmit'].forEach(v => {
    this[v] = this[v].bind(this);
  });
}

handleValidSubmit(event, values) {
  const data = {
    accepted: this.state.accepted,
  };
  console.log(data);
  axios({
    method: 'post',
    url:
      'https://oc6tq8iop5.execute-api.ap-southeast-1.amazonaws.com/dev/upload',
    data: JSON.stringify(data),
  }).then(data => {
    console.log(data);
    onDrop: accepted => {
      accepted.forEach(file => {
        req.attach(file.name, file);
      });
      req.end(callback);
      var formData = new FormData();
      formData.append('gambar', values.accepted);
      console.log(formData);
    };
  });
}

handleChange(event) {
  const { target } …

我可以找到大量关于如何使用带有各种 API 和库的分块文件上传的文档，但我无法找到如何仅通过普通 PHP 使用 Dropzone.js 分块文件上传。

文档非常少。我无法在客户端 (JavaScript) 添加除 jQuery 之外的任何库或 API。

我的问题是如何仅在服务器端使用 Dropzone.js 新的分块文件上传功能与 PHP。（客户端代码被赞赏用于设置）。

这是我到目前为止尝试过的代码：客户端 .js 文件：

    var myDropzone = new Dropzone("div#formDiv", 
    {
        url: "uploadform.php",
        params: function (files, xhr, chunk)
        {
            if (chunk)
            {
                return
                {
                    dzUuid=chunk.file.upload.uuid,
                    dzChunkIndex=chunk.index,
                    dzTotalFileSize=chunk.file.size,
                    dzCurrentChunkSize=chunk.dataBlock.data.size,
                    dzTotalChunkCount=chunk.file.upload.totalChunkCount,
                    dzChunkByteOffset=chunk.index * this.options.chunkSize,
                    dzChunkSize=this.options.chunkSize,
                    dzFilename=chunk.file.name;
                };
            }
        },
        method: "post",
        timeout: 600000,
        maxFileSize: 1024,
        parallelUploads: 1,
        chunking: true,
        forceChunking: true,
        chunkSize: 1000000,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
        chunksUploaded: function (file, done)
        {
            // All chunks …

我目前正在使用 RDU(react-dropzone-uploader) 将文件上传到服务器，我将上传的文件保存在反应状态。我试图弄清楚如何在反应状态下将已上传的文件显示为拖放区预览的一部分。

我尝试过查看文档中的道具列表。

https://react-dropzone-uploader.js.org/docs/props

我找到了initialFilesprop，但它会自动上传提供的输入文件数组。

任何帮助表示赞赏

我正在使用 Dropzone 上传文件，这是我的代码

<div>
    <form id="mainDiv" class="dropzone needsclick" enctype="multipart/form-data" method="post" action="uploadFiles?type=5" role="form">

        <div class="dz-message needsclick">
            Drop files here or click to upload.<br />
            <span class="note needsclick">(Please upload <strong>PDF, JPG, GIF, PNG, PDF</strong> files only.)</span>
        </div>

    </form>
</div>


<div>
    <form id="recommendationDiv" class="dropzone needsclick" enctype="multipart/form-data" method="post" action="uploadFiles?type=5" role="form">

        <div class="dz-message needsclick">
            Drop files here or click to upload.<br />
            <span class="note needsclick">(Please upload <strong>PDF, JPG, GIF, PNG, PDF</strong> files only.)</span>
        </div>

    </form>
</div>

上传工作正常，但我想限制上传文件的类型

<script>

  Dropzone.options.dropzone = {
        acceptedFiles:'image/*'       
    };


</script>  

接受的文件似乎不起作用，它只是上传所有内容。

Dropzone仅适用于元素本身我的按钮内部有一个SPAN标记,当我单击文本时,它不会触发单击dropzone附加到的父元素.我尝试了以下但它不起作用!

$('.dropzone').click();

还有这个

$('.dropzone').trigger('click');