拖放区未在表单中显示自身
Dropzone not displaying itself inside form
我正在尝试制作一个带有输入和图像/文件上传器的表单,以便在我按下提交按钮后将其全部上传。
但是当我将其放入表单中时,我的放置区(预览容器)没有显示自己。
.HTML
<form action="#" class="giga-form" id="my-awesome-dropzone">
<div class="col-md-5">
<h5>nimetus</h5>
<input class="form-control" type="text" required>
<h5>tüüp</h5>
<select class="form-control" required>
@foreach($types as $type)
<option value="{{$type->id}}">{{$type->name}}</option>
@endforeach
</select>
<h5>aadress</h5>
<input class="form-control" type="text">
<h5>tellija</h5>
<input class="form-control" type="text">
<h5>info</h5>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="col-md-6 col-md-offset-1 top-pad">
<div class="ico-border"><i class="icon-unlock"></i></div> avalik. <a href="#"><b>Varja</b></a>
<h5 class="top-br">pildid ja failid</h5>
<div class="giga-table fixed thumbnails dropzone">
<div class="dropzone-previews"></div>
</div>
</div>
<button type="submit">Continue</button>
</form>
脚本
{{ HTML::script("js/jquery-1.9.1.js") }}
{{ HTML::script("js/jquery-ui-1.9.2.custom.min.js") }}
{{ HTML::style('css/basic.css');}}
{{ HTML::style('css/dropzone.css');}}
{{ HTML::script('js/dropzone.js') }}
<script>
Dropzone.autoDiscover = false; // if this is true I get "URL not defined" in console.
$(document).ready(function(){
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
url: '#',
previewsContainer: ".dropzone-previews",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
console.log(myDropzone); // This doesn't get logged when I check. <-------
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
});
</script>
看起来像 dropzone.js 仅在div id 位于类放置区内时才检测它的驼化版本。
修复
.HTML
<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
请注意,我有类拖放区和 id my-awesome-dropzone。
.JS
$(document).ready(function(){
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
url: '#',
previewsContainer: ".dropzone-previews",
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100
}
});
这现在有效。我问题中的代码需要重做一点,但我决定采用另一种可行的方法,所以我缩短了代码。
相关文章:
- 如何使用jquery在单击按钮时显示表单
- 如果选择单选按钮,则显示表单
- 单击按钮后在警报中显示表单值
- 提交后如何递增和显示表单数量
- 在HTML中隐藏/显示表单会产生异常结果
- 使用Jquery在单击“”时显示表单;添加对象”;按钮
- 根据发送的输入内容隐藏/显示表单
- 如何检查页面加载时是否选中复选框,如果选中,则显示表单
- 以引导模式显示表单结果
- 如何使用复选框显示表单的更多选项并更改表单的操作属性
- 根据在jQuery字段中输入的数量显示表单的不同部分
- 我正在尝试在使用 javascript 单击按钮时显示表单
- 如何使用 JavaScript 函数显示表单 asp.net
- 如何通过隐藏表单在同一页面中显示表单输出
- 如何向客户显示表单中的预览
- 如何在同一窗口中显示表单输出并隐藏表单
- 使用jQuery切换根据选中的复选框隐藏/显示表单提交按钮 - 如何设置默认关闭的提交按钮
- 显示表单前的 JQGRID 验证
- 根据下拉列表中的选定值显示表单
- Javascript:读取,添加和显示表单值