Dropzone图片上传错误显示如何去除错误

Question

注意：我厌倦了所有与此主题相关的问题和答案。

我想在 Dropzone 中上传 img 或其他文档后删除弹出窗口中的 HTML 数据。

接受的Dropzone上传文件正在分配 var accept = ".png";工作正常。 查看代码 Here。但是在上传图片或其他文件后，会显示一些 html

下面的代码片段示例。

var accept = ".png";
Dropzone.autoDiscover = false;

// Dropzone class:
var myDropzone = new Dropzone("#mydropzone", { 
  url: "/file/post",
   acceptedFiles: accept,
   uploadMultiple: false,
   createImageThumbnails: false,
   addRemoveLinks: true,
    maxFiles: 3,
    maxfilesexceeded: function(file) {
        this.removeAllFiles();
        this.addFile(file);
    }
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsbox-1" runat="server"  >
  <div class="dropzone clsbox" id="mydropzone">

  </div>
 </div>

Answer 1

错误是因为您是运行 fiddle 中的代码，而dropzone 正试图将文件上传到不存在的url。

当 dropzone 出错时，会在红色弹出窗口中显示服务器收到的消息，在本例中是一个 html 页面。

当您将文件上传到有效的 url 时不会发生这种情况。

您可以像这样更改弹出窗口中的文本。

var myDropzone = new Dropzone("#mydropzone", {
  url: "/file/post",
  acceptedFiles: accept,
  uploadMultiple: false,
  createImageThumbnails: false,
  addRemoveLinks: true,
  maxFiles: 3,
  maxfilesexceeded: function(file) {
    this.removeAllFiles();
    this.addFile(file);
  },
  init: function() {
    this.on('error', function(file, errorMessage) {
      if (errorMessage.indexOf('Error 404') !== -1) {
        var errorDisplay = document.querySelectorAll('[data-dz-errormessage]');
        errorDisplay[errorDisplay.length - 1].innerHTML = 'Error 404: The upload page was not found on the server';
      }
    });
  }
});

或者当您处于 fiddle 时，您可以通过更改 class 来假装上传成功。

init: function() {
  this.on('error', function(file, errorMessage) {
    if (file.accepted) {
      var mypreview = document.getElementsByClassName('dz-error');
      mypreview = mypreview[mypreview.length - 1];
      mypreview.classList.toggle('dz-error');
      mypreview.classList.toggle('dz-success');
    }
  });
}

Dropzone图片上传错误显示如何去除错误

Dropzone image upload error display how to remove error

javascript

jquery

dropzone.js