我的每个引导选项卡中都有dropzone(v3.7.1)div。
HTML
<form class="my-form" method="post">
<input type="text" name="form-input-1" id="form-input-1" />
<input type="text" name="form-input-2" id="form-input-2" />
<div class="tab-content">
<div class="tab-pane active" id="ic_6">
<h3>Overview</h3>
<div rel="6" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_1">
<h3>Living Room</h3>
<div rel="1" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_2">
<h3>Kitchen</h3>
<div rel="2" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_3">
<h3>Bathroom</h3>
<div rel="3" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_4">
<h3>Bedroom</h3>
<div rel="4" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_5">
<h3>Outdoors</h3>
<div rel="5" class="dropzone" id="my-dropzone"></div>
</div>
</div>
<button type="submit">Submit</button>
</form>
JS
Dropzone.options.myDropzone = {
url: "upload.php",
maxFilesize: 2, // MB
addRemoveLinks: true,
acceptedFiles: "image/*",
accept: function(file, done) {
console.log("uploaded");
done();
},
init: function() {
this.on("addedfile", function(file) {
//== divider ==//
var dividerElement = Dropzone.createElement("<div> </div>");
file.previewElement.appendChild(dividerElement);
//== caption input : still trying to figure capturing this ==//
var captionInput = Dropzone.createElement("<input type='text' name='caption' maxlength='50' placeholder='Enter a caption' />");
file.previewElement.appendChild(captionInput);
});
this.on("removedfile", function(file) {
$.ajax({
url: "delete_temp_files.php",
type: "POST",
data: { filename: file.name }
});
});
}
}