Dropzone - 使用提交

时间:2017-02-25 12:21:58

标签: php jquery laravel-5.3 dropzone.js

我在laravel 5.3项目中工作。

在提问之前我已经尝试过这些链接:

1st2nd3rd4th5th但没有运气。

让我告诉你我的代码。

  

details.blade.php

<form class="form"  method="post" action="{{url('add_user_photo_gallery')}}" id="my-awesome-dropzone"  name="validate_resume">
<input name="_token" type="hidden" value="{{ csrf_token() }}"/>
<div class="card-body">
    <div class="row">
        <div class="col-md-12 col-sm-12 text-center">
            <div class="form-group floating-label">
                <div id="dropzonephoto" class="dropzone dz-clickable form-fileupload">
                    <div class="dz-message dz-default" style="text-align:center;">

                        <span>Click Here to upload Photo </span>
                    </div>
                </div>
            </div>
            <small>jpg, png , jpeg - upto 1 Mb max</small>
        </div>

        <div class="col-md-12">
            <input type="text" name="first_name" />
        </div>

        <div class="col-md-12">
            <input type="text" name="last_name" />
        </div>

        <div class="col-md-12">
            <input type="email" name="email" />
        </div>

        <div class="row">
            <div class="col-md-12">
                <input type="submit" id="btn_save_photo" class="custom-btn primary-btn pull-right" required>
                <input type="reset" id="btn_reset_photo" class="custom-btn warning-btn pull-right" value="Cancle" required>
            </div>
        </div>
    </div>
</div>
</form>

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#dropzonephoto', { // Make the whole body a dropzone
    url: base_path + '/add_user_photo_gallery',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },        
    paramName: "images",
    parallelUploads: 1,
    maxFilesize: 1.0,
    maxFiles:20,
    acceptedFiles: ".png,.jpg,.jpeg",
    dictInvalidFileType: 'This file type is not supported.',
    dictFileTooBig:'File size too Big',
    addRemoveLinks: true
});



public function add_user_photo_gallery(Request $request){

    dd($request->all());

}

在我的控制器功能中,我打印来自表单的请求。除了dropzone图像,我得到了所有的字段。

使用上面的dropzone脚本,当我选择图像时,它立即转到控制器,我可以在控制台/网络中看到所有图像细节。我不想这样,所以我在脚本中添加了以下代码。

  

autoProcessQueue:假,

$('#btn_save_photo').on('click',function(e){
    e.preventDefault();
    myDropzone.processQueue();
});

添加此代码后,上传提交按钮,但未提交其他表单元素。此上传过程显示在检查元素/网络部分

所以我想要的是提交按钮想要页面刷新并使用dropzone图像打印所有表单数据。

有人在这里解决我的问题吗?

0 个答案:

没有答案