Я новичок в dropzone , и я хочу превратить мою кнопку просмотра в мою зону приема, которая принимает файлы.
Это моя форма сейчас.
@extends('layouts.be.master')
@section('content')
<script src="//cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<div class="card-body card-padding">
<div class="row">
{!! Form::open(array('class' => 'form-horizontal dropzone', 'role' =>'form', 'url'=>'portfolio/store','files' => true)) !!}
<div class="col-sm-12">
{{-- Name --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" value="{{Request::old('name')}}" value="" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Type --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select name="type" class="form-control">
@foreach($portfolioTypes as $item)
<option value="{{ $item }}">{{ $item }}</option>
@endforeach
</select>
</div>
</div>
{{-- Tags --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
</div>
<input id="tags" name="tag">
</div>
{{-- URL --}}
<div class="form-group">
<label for="url" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input name="url" type="text" value="" class="form-control" placeholder="URL">
</div>
</div>
{{-- URL --}}
<div class="form-group">
<label for="url" class="col-sm-2 control-label">Images</label>
<div class="col-sm-10 ">
<input id="images" name="images[]" type="file" multiple>
</div>
</div>
{{-- Description --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea name="description" rows="20" cols="80" id="description">
</textarea>
<script>
CKEDITOR.replace( 'description' );
CKEDITOR.config.height = 500;
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<a class="btn btn-default" href="/portfolio"> Cancel </a>
<button type="submit" class="btn btn-info">Create</button>
</div>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
@stop
@section('custom-scripts')
{{-- Tags --}}
<link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js/jquery.tag-editor.js"></script>
<script type="text/javascript" src="/js/ckeditor.js"></script>
<script type="text/javascript" src="/js/dropzone.js"></script>
<script type="text/javascript">
$('#tags').tagEditor({
autocomplete: {
delay: 0,
position: { collision: 'flip' },
source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
},
forceLowercase: false,
delimiter: ',', /* space and comma */
placeholder: 'Enter tags ...',
initialTags: ['HTML','CSS','Javascript','jQuery','Bash']
});
$("#images").dropzone();
</script>
@stop
Это мой результат
В документации предлагается добавить class"dropzone" к элементу формы, но это если у меня во всей моей форме есть только загрузка файла, но у меня есть и другие входные данные.
Прямо сейчас, моя кнопка просмотра работает отлично (проверено на 100%), и я вообще не хочу нарушать эту функциональность. Я просто хочу улучшить его внешний вид, добавил возможность удалять файлы и отправлять эти файлы сразу после отправки формы.
Как с этим справиться?
Обновление
Я попробовал то, что предложил @Kunal
Dropzone.options.myDropzone= {
url: 'portfolio/store',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("name", jQuery("input[name ='name']").val());
formData.append("name", jQuery("select[name ='type']").val());
formData.append("name", jQuery("input[name ='tag']").val());
formData.append("name", jQuery("input[name ='url']").val());
formData.append("name", jQuery("textarea[name ='description']").val());
});
}
}
Я ничего не вижу отправить в мой бэкэнд, а также, кажется, отправить 2 раза, потому что я вижу 2 записи созданы.
