web-dev-qa-db-ja.com

ドロップゾーン画像アップロードエラー表示エラーを削除する方法

注：このトピックに関連するすべての質問と回答に疲れました。

Dropzoneにimgまたは他のドキュメントをアップロードした後、ポップアップのHTMLデータを削除したい。

受け入れられたDropzoneuploedファイルはassignvar accept = ".png";正常に動作します。 コードを参照ここ 。しかし、画像または他のファイルのアップロード後、いくつかの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>
javascriptjquerydropzone.js
6
Sumit patel

このエラーは、フィドルでコードを実行していて、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');
    }
  });
}
7
wallek876