我目前有一个HTML表单,用户填写他们希望张贴的广告细节。我现在想能够添加一个dropzone用于上传待售物品的图像。
我找到了Dropzone.js,它似乎能满足我的大部分需求。但是,在查看文档时,似乎需要将整个表单的类指定为dropzone
(而不仅仅是输入元素)。这意味着我的整个表单变成了dropzone。
是否可以只在表单的一部分使用dropzone,即只将元素指定为类 "dropzone",而不是整个表单?
我可以使用单独的表单,但我希望用户能够通过一个按钮提交所有表单。
或者,有没有其他库可以做到这一点?
非常感谢
发布于 2015-03-20 20:44:15
这是另一种方法:在表单中添加一个带有dropzone类名的div
,然后以编程方式实现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");
}
});
});
注意:禁用autoDiscover,否则Dropzone将尝试连接两次
发布于 2016-02-09 01:07:31
我遇到了完全相同的问题,并发现Varan Sinayee的答案是唯一一个实际解决了原始问题的答案。这个答案可以简化,所以这里有一个更简单的版本。
具体步骤如下:
class="dropzone"
(这就是Dropzone附加到其中的方式)和id="yourDropzoneName"
(用于更改选项)的div放入其中。瞧!您现在可以在$_POST和$_FILES中检索数据,就像使用普通表单一样(在本例中,这将发生在upload.php中)
HTML
<form action="upload.php" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone" id="myDropzone"></div>
<button type="submit" id="submit-all"> upload </button>
</form>
JS
Dropzone.options.myDropzone= {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("firstname", jQuery("#firstname").val());
formData.append("lastname", jQuery("#lastname").val());
});
}
}
发布于 2015-11-24 04:43:55
"dropzone.js“是最常用的上传图片的库。如果您只想将"dropzone.js“作为表单的一部分,则应执行以下步骤:
1)客户端:
HTML :
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<div>
<button type="submit" id="submit-all"> upload </button>
</div>
JQuery:
<script>
Dropzone.options.myDropzone = {
url: "/Account/Create",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submit-all");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("Username", $("#Username").val());
});
}
};
</script>
2)服务器端:
ASP.Net MVC
[HttpPost]
public ActionResult Create()
{
var postedUsername = Request.Form["Username"].ToString();
foreach (var imageFile in Request.Files)
{
}
return Json(new { status = true, Message = "Account created." });
}
https://stackoverflow.com/questions/17872417
复制相似问题