在dropzone文件上载中显示成功/错误消息

时间:2016-07-25 11:42:49

标签: javascript php laravel laravel-5.1 dropzone.js

我正在使用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>

甚至连警报都没有工作......非常感谢任何帮助。谢谢

1 个答案:

答案 0 :(得分:2)

你应该听取事件,并触发它是否成功

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

注意:您可以按照建议的here

设置其他断点
相关问题