Javascript 向Dropzone.js中的每个文件添加表单字段
我已经试着让它工作了将近一个星期了。最后我会寻求帮助。我肯定我错过了一些简单的东西 我使用DropZone.js允许将图片上传到web服务器。我需要在每次上传中添加一个文本框,以便用户可以在图像中输入附加信息或“标记”,以便以后可以通过这些标记进行过滤。我可以在添加的每个图像中获得显示的输入,但当我在“发送”事件期间尝试读取这些文本框中的值时,我所获得的只是第一个文本框的值。因此,如果他们上传5张图片,所有图片都会带有在第一个文本框中输入的“标签” 我感谢你能提供的任何帮助Javascript 向Dropzone.js中的每个文件添加表单字段,javascript,jquery,html,asp.net,dropzone.js,Javascript,Jquery,Html,Asp.net,Dropzone.js,我已经试着让它工作了将近一个星期了。最后我会寻求帮助。我肯定我错过了一些简单的东西 我使用DropZone.js允许将图片上传到web服务器。我需要在每次上传中添加一个文本框,以便用户可以在图像中输入附加信息或“标记”,以便以后可以通过这些标记进行过滤。我可以在添加的每个图像中获得显示的输入,但当我在“发送”事件期间尝试读取这些文本框中的值时,我所获得的只是第一个文本框的值。因此,如果他们上传5张图片,所有图片都会带有在第一个文本框中输入的“标签” 我感谢你能提供的任何帮助 <div cl
<div class="table table-striped" class="files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview">
<img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="tags" data-dz-tags></p>
<input type="text" id="tags" name="tags" />
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width: 0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
开始
取消
删除
还有javascript:
<script>
// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "project.aspx", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function (file) {
// Hookup the start button
file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function (progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function (file, xhr, formData) {
formData.append("tags", document.getElementById('tags').value);
// Show the total progress bar when upload starts
document.querySelector("#total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function (progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function () {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function () {
myDropzone.removeAllFiles(true);
};
</script>
//获取模板HTML并将其从文档中删除
var previewNode=document.querySelector(“模板”);
previewNode.id=“”;
var previewTemplate=previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone=newdropzone(document.body,{//使整个主体成为Dropzone
url:“project.aspx”,//设置url
指钉宽度:80,
拇指指甲高度:80,
并行上传:20,
预览模板:预览模板,
autoQueue:false,//请确保在手动添加之前不会将文件排入队列
PreviewContainer:“#previews”//定义用于显示预览的容器
可单击:“.fileinput按钮”//定义应用作单击触发器以选择文件的元素。
});
myDropzone.on(“addedfile”,函数(文件){
//连接启动按钮
file.previewElement.querySelector(“.start”).onclick=function(){myDropzone.enqueueFile(file);};
});
//更新总进度条
myDropzone.on(“totaluploadprogress”,函数(进度){
document.querySelector(“#total progress.progress bar”).style.width=progress+“%”;
});
on(“发送”,函数(文件、xhr、formData){
formData.append(“tags”,document.getElementById(“tags”).value);
//开始上载时显示总进度条
document.querySelector(“#总进度”).style.opacity=“1”;
//并禁用“开始”按钮
file.previewElement.querySelector(“.start”).setAttribute(“禁用”、“禁用”);
});
//当不再上传任何内容时隐藏总进度条
myDropzone.on(“队列完成”,函数(进度){
document.querySelector(“#总进度”).style.opacity=“0”;
});
//设置所有传输的按钮
//“添加文件”按钮不需要设置,因为配置
//已指定“clickable”。
document.querySelector(“#actions.start”).onclick=function(){
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector(“#actions.cancel”).onclick=function(){
myDropzone.removeAllFiles(true);
};
这些都包含在一个aspx页面中,并发回自己。在后面的代码中,我试图读取表单的值。但我只得到第一个文本框中的值
谢谢,
Keith您将通过此
var tag= file.previewElement.querySelector('input[name="tags"]').value
formData.append("tags", tag);
这对我来说是可行的,但我的输入没有id
<p class="tags" data-dz-tags></p>
<input type="text" name="tags" />
这个解决方案有什么好运气吗?我正在尝试使用react-dropzone组件实现它解决方案成功了吗?谢谢@Tjeans,它对我有用,我不明白dropzone为什么没有解释这个。。。