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

时间:2016-09-29 04:59:20

标签: javascript jquery dropzone.js

注意:我厌倦了所有问题&回答相关这个话题。

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

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

enter image description here

摘录示例如下。



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:5)

错误的原因是您在小提琴中运行代码,而dropzone正在尝试将文件上传到不存在的网址。

当dropzone收到错误时,显示服务器在红色弹出窗口中收到的消息,在这种情况下是一个html页面。

将文件上传到有效网址时不会发生这种情况。

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

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