如何显示 jquery dropzone 的错误消息答案

【问题标题】：How to display error message of jquery dropzone如何显示 jquery dropzone 的错误消息
【发布时间】：2015-01-17 18:52:13
【问题描述】：

我在 CI 中使用 dropzone，我不知道如何在上传 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");

但是当我将图像悬停时，它会显示 [object Object] 但消息是：

dictResponseError: '上传文件时出错！'

【问题讨论】：

标签： dropzone.js

【解决方案1】：

送给有需要的人：

您可以使用 echo 从服务器返回响应消息。然后在js代码中添加错误事件处理程序

PHP

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

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

【讨论】：

我发现在文件开头使用 PHP 400 标头允许我的所有 PHP 错误出现在 Dropzone 中的文件预览中。这真的很有帮助，因为上传完成后我正在运行一些数据库查询。我建议始终在您的开发服务器上发送错误标头，以使调试更容易。

【解决方案2】：

对我来说，这段代码终于奏效了，用作 dropzone 选项：

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

我使用了 message.Message，因为 ASP.net WebAPI 返回一个 JSON 对象，但没有返回所需的“错误”键。

【讨论】：

我更喜欢这个答案，因为大多数 ajax 请求不仅仅是一个“消息”字符串。它们将是您必须从中获取消息的对象。
在我的代码中，我不得不在.text(message.message)中修改.text(message.Message)

【解决方案3】：

您可以简单地通过 PHP 文件从服务器回显消息

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>

希望对你有帮助:)

【讨论】：