javascript - 将输入文件浏览按钮变成 Dropzone 的最佳做法是什么?
问题描述
我是dropzone的新手,我想将浏览按钮变成接受文件的 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 条记录。
解决方案
inputs
您可以form
通过更改 dropzone.js 中的某些设置来添加 dropzone.js 和其他。它们如下
1:创建一个普通表单(不要忘记方法和 enctype args,因为这不再由 dropzone 处理)。
2:在 div 里面放一个 class="dropzone"(这就是 Dropzone 附加到它的方式)和 id="yourDropzoneName"(用于更改选项)。
3:设置Dropzone的选项,设置表单和文件将被发布的url,禁用autoProcessQueue(所以它只在用户按下'提交'时发生)并允许多次上传(如果你需要的话)。
4:设置init函数使用Dropzone而不是点击提交按钮时的默认行为。
5:仍然在init函数中,使用“sendingmultiple”事件处理程序将表单数据与文件一起发送。
HTML
<form action="upload.php" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone" id="myDropzone"></div>
<button type="submit" id="submit-all"> upload </button>
</form>
Dropzone.js
Dropzone.options.myDropzone= {
url: 'upload.php',
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("firstname", jQuery("#firstname").val());
formData.append("lastname", jQuery("#lastname").val());
});
}
}
推荐阅读
- javascript - $_FILE 将文件从 JS 传递到 0 字节的 PHP 脚本(使用 jQuery validate v1.14.0 和 jQuery v3.2.1)
- spring-webflux - 请求具有图像内容类型示例的响应式服务器响应
- asp.net-core - 将整数数组传递给 ASP.NET Core 中的 ApiController
- javascript - 如何在 React JS 中一次更新状态变量
- python - 从多个不同大小的数据集加载 PyTorch 数据
- r - apply() 没有按预期工作
- python - 无法在 Pycharm 中执行“manage.py”命令
- c# - 任务中的属性值不同
- sqlite - 在 docker 容器中运行 go binary 时找不到 Spatialite 扩展
- c++ - 在谷歌测试中检测分离线程调用exit(0)