在 dropzone 文件上传时显示成功/错误消息

Posted 2023-02-24

【中文标题】在 dropzone 文件上传时显示成功/错误消息

【英文标题】：Show success/error message on dropzone file upload

【发布时间】：2016-11-28 17:48:17

【问题描述】：

我正在使用 dropzone 文件上传，当我从控制器返回成功/错误时，如何在我的视图文件中显示它..

查看文件，

 <div class="box-body">
    @if ( $errors->count() > 0 )
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
         $message = 'Please select csv file only.' 
    </div>
    @endif

!! Form::open([ 'url' => 'admin/reports','class' => 'dropzone', 'id' => 'reportfile' ]) !!
    !! csrf_field() !!
    <div class="col-md-12">
        <h3 style="text-align : center">Select File</h3>
    </div>
    <button type="submit" class="btn btn-primary">Upload Report</button>
    !! Form::close() !!

</div>

控制器代码

if ($request->hasFile('file')) 
        $file = Input::file('file');
        $validator = Validator::make(
                        [
                    'file' => $file,
                    'extension' => strtolower($file->getClientOriginalExtension()),
                        ], [
                    'file' => 'required',
                    'extension' => 'required|in:csv',
                        ]
        );
        if ($validator->fails()) 

            return Response::json('error', 400);

        

JS 代码

<script>
window.onload = function () 

    Dropzone.options.reportfile = 
        paramName: "file", 
        maxFilesize: 2,
        error: function (file, response) 
            alert('hiii')
        ,
        init: function () 
            this.on("addedfile", function (file) 
                alert("Added file.");
            );
        ,
        accept: function (file, done) 
            alert('hi')
            if (file.name == "justinbieber.jpg") 
                done("Naha, you don't.");
            

        

    ;
;
</script>

甚至警报都不起作用......非常感谢任何帮助......谢谢

【问题讨论】：

这是否在您的控制台中显示任何错误？

是的，它在控制台响应选项卡上显示“错误”字符串。当我返回 400 错误请求错误时，还在控制台中显示“400 错误请求”。

添加；在alert('hi');

【参考方案1】：

你应该监听事件，并触发它是否成功

Dropzone.options.uploadWidget = 
  init: function() 
    this.on('success', function( file, resp )
       alert("Success");
    );
  ,
  ...
;

注意：您可以按照here 的建议设置其他断点

【讨论】：

是uploadWidget id还是表单名称？？

这取决于启动它。如果您尝试使用表单的id，您也可以使用var uploader = new Dropzone(‘#upload-widget’, options);。

如何监听服务器端响应 dropzone 事件的 400 错误。我使用了错误事件，但它不起作用。

我用谷歌搜索并找到了它的错误事件。谢谢你。我们可以参考dropzonejs官网