web-dev-qa-db-ja.com

jquery dropzoneのエラーメッセージを表示する方法

私はCIでドロップゾーンを使用しています、アップロード時にエラーメッセージとカスタムメッセージを表示する方法がわからないfalse、これは私のスクリプトです

Dropzone.autoDiscover = false;
        try {
            var myDropzone = new Dropzone("#adminform" , {
                paramName: "filename", // The name that will be used to transfer the file
                maxFilesize: 0.5, // MB
                url: window.location.href,
                addRemoveLinks : true,
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
                dictResponseError: 'Error while uploading file!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            });
        } 
        catch(e) {
            alert('Dropzone does not support older browsers!');
        }

そしてPHP 400を返す：

$this->output->set_header("HTTP/1.0 400 Bad Request");

しかし、画像にカーソルを合わせると[オブジェクト]が表示されますが、メッセージは次のとおりです。

dictResponseError： 'ファイルのアップロード中にエラーが発生しました！'

enter image description here

dropzone.js
16
Code Metal

困っている人のために：

Echoを使用して、サーバーから応答メッセージを返すことができます。次に、jsコードにエラーイベントハンドラーを追加します

PHP

header("HTTP/1.0 400 Bad Request");
echo "Ups error message";

JS

this.on('error', function(file, response) {
    $(file.previewElement).find('.dz-error-message').text(response);
});
21
Alwin Kesler

私にとって、このコードはついに機能し、ドロップゾーンオプションとして使用されました。

error: function(file, message) {
      $(file.previewElement).addClass("dz-error").find('.dz-error-message').text(message.Message);
    }

ASP.net WebAPIがJSONオブジェクトを返すため、message.Messageを使用しましたが、必要な「エラー」キーはありません。

10
Fabian von Ellerts

PHP file

if($file_uploaded == true)
{

   //perform operations on valid upload

} else {

  //upload failed, echo back negative response to dropzone.js
  $this->output->set_header("HTTP/1.0 400 Bad Request");
  echo "Error uploading file";

}

HTMLファイルは次のようになります。

<script type="text/javascript">
    Dropzone.options.myAwesomeDropzone = {
        paramName: "icon_image", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        init: function() {
            this.on("error", function(file, response) {
                // do stuff here.
                alert(response);

            });

        }
    };
</script>

それが役に立てば幸い ：）

9
user2354671