javascript Dropzone JS 的自定义预览模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25788201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Preview Template for Dropzone JS
提问by user2378120
I created a form with the dropzone, but I'm having issues passing the files to the server. I created a custom preview template, similar to the one on the bootstrap demo, but when I click on submit on my form, the files are not being passed to the server. Any help would be appreciated. Below is the code.
我用 dropzone 创建了一个表单，但是我在将文件传递到服务器时遇到了问题。我创建了一个自定义预览模板，类似于引导程序演示中的模板，但是当我单击表单上的提交时，文件没有传递到服务器。任何帮助，将不胜感激。下面是代码。
<form action="<?php the_permalink(); ?>" method="post" class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data">
<div class="dropzoner dropzone-previews" id="dropzoner2">
<div class="dz-preview dz-file-preview" id="template"> <!-- template for images -->
<div class="dz-details dztemplate">
<div class="dz-filename" style="display:none;"><span data-dz-name></span></div>
<div class="dz-size" style="display:none;" data-dz-size></div>
<img data-dz-thumbnail /><br/><input type="text" class="dzinput" placeholder="Type Caption" style="font-style:italic;" />
</div>
<div class="dz-progress" style="display:none;"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark" style="display:none;"><span>?</span></div>
<div class="dz-error-mark" style="display:none;"><span>?</span></div>
<div class="dz-error-message" style="display:none;"><span data-dz-errormessage></span></div>
</div>
</div> <!-- Drop Zone Area -->
<div class="flrt"><a href="#" class="dz-message" style="font-weight:bold; font-size:18px;">Or use the basic uploader</a></div><br/>
<label for="exampletitle">Title<span class="required">*</span></label><br/>
<input type="text" name="exampletitle" id="exampletitle" class="fullwidth" required> <br/><br/>
<input type="submit" class="btn btn-primary mypanoramabtn" style="background-color:#3ebede" value="Publish" id="submitter"/>
</form>
My Javascript:
我的Javascript：
//getting thumbnail template
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
//script to handle dropzone
jQuery("#my-awesome-dropzone").dropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
thumbnailWidth: 180,
thumbnailHeight: 120,
parallelUploads: 100,
maxFiles: 100,
previewTemplate: previewTemplate,
previewsContainer: "#dropzoner2",
// The setting up of the dropzone
init: function() {
this.on("addedfile", function(file) { document.getElementById("dropzoner2").style.background = "none";}); //will remove background after file added
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("input[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
});
}
}
I've tried the demos on the wiki and a few others on stackoverflow, but have been unable to get this to work. Right now when I drag and drop my images, I do see the thumbnail in my template, but when I click submit, the images are not passed to the server for me to handle. ANY help would be appreciated.
我已经尝试了 wiki 上的演示和 stackoverflow 上的其他一些演示，但一直无法让它工作。现在，当我拖放图像时，我确实在模板中看到了缩略图，但是当我单击提交时，图像不会传递到服务器供我处理。任何帮助，将不胜感激。
回答by André Hauptfleisch
Just follow this tutorial: http://www.codexworld.com/drag-and-drop-file-upload-using-dropzone-php/
只需按照本教程：http: //www.codexworld.com/drag-and-drop-file-upload-using-dropzone-php/
The issue here is that the files are uploaded asynchronously before you press the submit button.
这里的问题是文件在您按下提交按钮之前异步上传。
