我目前有一个HTML表单，用户填写他们希望张贴的广告的细节。我现在想能够添加一个dropzone上传出售的项目的图像。
我发现Dropzone.js似乎做了我需要的大部分。但是，在查看文档时，似乎需要将整个表单的类指定为dropzone(而不仅仅是input元素)。这意味着我的整个表单变成了dropzone。
是否有可能使用dropzone只是我的形式的一部分，即只指定元素作为类“dropzone”，而不是整个形式?
我可以使用单独的表单，但我希望用户能够通过一个按钮提交所有内容。
或者，是否有其他库可以做到这一点?
非常感谢
当前回答
这里有另一种方法:在您的表单中添加一个div，类名为dropzone，并以编程方式实现dropzone。
HTML:
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
JQuery:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
注意:禁用自动发现，否则Dropzone将尝试附加两次
其他回答
我想在这里提供一个答案，因为我也面临着同样的问题-我们希望$_FILES元素作为另一个表单的一部分可用。我的答案是基于@mrtnmgs，但注意到这个问题的评论。
首先:Dropzone通过ajax发布数据
因为你使用了formData。附加选项仍然意味着你必须处理用户体验操作——也就是说，这一切都发生在幕后，而不是一个典型的表单post。数据被发送到url参数。
其次:如果您因此想要模拟表单发布，则需要存储发布的数据
这需要服务器端代码将你的$_POST或$_FILES存储在一个会话中，该会话可用于用户在另一个页面加载，因为用户不会转到收到发布数据的页面。
第三:您需要将用户重定向到处理该数据的页面
现在你已经发布了你的数据，存储在一个会话中，你需要在一个额外的页面中为用户显示/操作它。您还需要将用户发送到该页面。
举个例子:
[Dropzone code:使用Jquery]
$('#dropArea').dropzone({
url: base_url+'admin/saveProject',
maxFiles: 1,
uploadMultiple: false,
autoProcessQueue:false,
addRemoveLinks: true,
init: function(){
dzClosure = this;
$('#projectActionBtn').on('click',function(e) {
dzClosure.processQueue(); /* My button isn't a submit */
});
// My project only has 1 file hence not sendingmultiple
dzClosure.on('sending', function(data, xhr, formData) {
$('#add_user input[type="text"],#add_user textarea').each(function(){
formData.append($(this).attr('name'),$(this).val());
})
});
dzClosure.on('complete',function(){
window.location.href = base_url+'admin/saveProject';
})
},
});
你可以通过捕捉dropzone中的'sending'事件来修改formData。
dropZone.on('sending', function(data, xhr, formData){
formData.append('fieldname', 'value');
});
这是我的例子，是基于Django + Dropzone。视图有选择(必需的)和提交。
<form action="/share/upload/" class="dropzone" id="uploadDropzone">
{% csrf_token %}
<select id="warehouse" required>
<option value="">Select a warehouse</option>
{% for warehouse in warehouses %}
<option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
{% endfor %}
</select>
<button id="submit-upload btn" type="submit">upload</button>
</form>
<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
var filename = "";
Dropzone.options.uploadDropzone = {
paramName: "file", // The name that will be used to transfer the file,
maxFilesize: 250, // MB
autoProcessQueue: false,
accept: function(file, done) {
console.log(file.name);
filename = file.name;
done(); // !Very important
},
init: function() {
var myDropzone = this,
submitButton = document.querySelector("[type=submit]");
submitButton.addEventListener('click', function(e) {
var isValid = document.querySelector('#warehouse').reportValidity();
e.preventDefault();
e.stopPropagation();
if (isValid)
myDropzone.processQueue();
});
this.on('sendingmultiple', function(data, xhr, formData) {
formData.append("warehouse", jQuery("#warehouse option:selected").val());
});
}
};
</script>
这里有另一种方法:在您的表单中添加一个div，类名为dropzone，并以编程方式实现dropzone。
HTML:
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
JQuery:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
注意:禁用自动发现，否则Dropzone将尝试附加两次
为了在一个请求中提交所有文件和其他表单数据，您可以将Dropzone.js临时隐藏输入节点复制到您的表单中。你可以在adddedfiles事件处理程序中做到这一点:
var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
// Input node with selected files. It will be removed from document shortly in order to
// give user ability to choose another set of files.
var usedInput = myDropzone.hiddenFileInput;
// Append it to form after stack become empty, because if you append it earlier
// it will be removed from its parent node by Dropzone.js.
setTimeout(() => {
// myForm - is form node that you want to submit.
myForm.appendChild(usedInput);
// Set some unique name in order to submit data.
usedInput.name = "foo";
}, 0);
});
显然，这是一种依赖于实现细节的变通方法。相关源代码。
