Dropzone图像上传错误显示如何消除错误

Question

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

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

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

sn-p 示例如下。

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

错误是因为您在小提琴中运行代码，并且 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';
      }
    });
  }
});

或者，当您处于困境中时，您可以通过更改类来假装上传成功。

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');
    }
  });
}