我想允许用户为拖动到Dropzone中的每个文件提交标题,该文件将输入到文本输入中。但是我不知道如何添加它。每个人都可以帮助我吗?
这是我的html代码
<form id="my-awesome-dropzone" class="dropzone">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<!-- Now setup your input fields -->
<input type="email" name="username" id="username" />
<input type="password" name="password" id="password" />
<button type="submit">Submit data and files!</button>
</form>
这是我的脚本代码
<script>
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
url: "upload.php",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
maxFilesize:10,//MB
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// 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
});
},
accept: function (file, done) {
//maybe do something here for showing a dialog or adding the fields to the preview?
},
addRemoveLinks: true
}
</script>
最佳答案
实际上,您可以为Dropzone提供一个模板,以渲染图像预览以及任何其他字段。对于您的情况,我建议您采用默认模板或自行创建模板,然后在此处简单地添加输入字段:
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<input type="text" placeholder="Title">
</div>
完整的默认预览模板可以在dropzone.js的源代码中找到。
然后,您可以简单地将自定义模板作为选项参数的PreviewTemplate键的字符串传递给Dropzone。例如:
var myDropzone = new Dropzone('#yourId', {
previewTemplate: "..."
});
只要您的元素是表单,Dropzone就会自动在xhr请求参数中包括所有输入。
关于templates - 如何将文本输入添加到Dropzone上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20391134/