我目前有一个 HTML 表单，用户可以在其中填写他们希望发布的广告的详细信息。我现在希望能够添加一个悬浮窗上载该项目用于出售的图片。
我发现Dropzone.js似乎可以满足我的大部分需求。但是，在查看文档时，您似乎需要指定整个表单的类dropzone（而不仅仅是输入元素）。这意味着我的整个表单成为dropzone。
是否可以仅在我的表单的一部分中使用 dropzone，即仅将元素指定为类"dropzone"，而不是整个表单？
我可以使用单独的表单，但我希望用户能够通过一个按钮提交所有表单。
或者，是否有另一个图书馆可以做到这一点？
非常感谢
这是另一种方法：div在您的表单中添加一个类名 dropzone，并以编程方式实现 dropzone。
HTML :
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
查询：
$(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 将尝试附加两次
我遇到了完全相同的问题，发现 Varan Sinayee 的答案是唯一真正解决了原始问题的答案。不过，这个答案可以简化，所以这里有一个更简单的版本。
步骤是：
创建一个普通表单（不要忘记方法和 enctype args，因为这不再由 dropzone 处理）。
在里面放置一个 div class="dropzone"（这就是 Dropzone 附加到它的方式）和id="yourDropzoneName"（用于更改选项）。
设置 Dropzone 的选项，设置将发布表单和文件的 url，停用 autoProcessQueue（因此它仅在用户按下“提交”时发生）并允许多次上传（如果需要）。
将 init 函数设置为在单击提交按钮时使用 Dropzone 而不是默认行为。
仍然在 init 函数中，使用“sendingmultiple”事件处理程序将表单数据与文件一起发送。
瞧！您现在可以像使用普通表单一样在 $_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());
});
}
}
“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>
查询：
<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." });
}
我有一个更自动化的解决方案。
<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
{{ csrf_field() }}
<!-- You can add extra form fields here -->
<input hidden id="file" name="file"/>
<!-- You can add extra form fields here -->
<div class="dropzone dropzone-file-area" id="fileUpload">
<div class="dz-default dz-message">
<h3 class="sbold">Drop files here to upload</h3>
<span>You can also click to open file browser</span>
</div>
</div>
<!-- You can add extra form fields here -->
<button type="submit">Submit</button>
</form>
Dropzone.options.fileUpload = {
url: 'blackHole.php',
addRemoveLinks: true,
accept: function(file) {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function() {
let content = fileReader.result;
$('#file').val(content);
file.previewElement.classList.add("dz-success");
}
file.previewElement.classList.add("dz-complete");
}
}
// Get file content
$file = base64_decode(request('file'));
无需禁用 DropZone Discovery，普通表单提交将能够通过标准表单序列化发送带有任何其他表单字段的文件。
这种机制在处理时将文件内容作为 base64 字符串存储在隐藏输入字段中。您可以通过标准base64_decode()方法将其解码回 PHP 中的二进制字符串。
我不知道这种方法是否会因大文件而受到影响，但它适用于约 40MB 的文件。
Enyo 的教程很棒。
我发现教程中的示例脚本对于嵌入在 dropzone 中的按钮（即表单元素）运行良好。如果您希望将按钮放在表单元素之外，我可以使用单击事件来完成它：
首先，HTML：
<form id="my-awesome-dropzone" action="/upload" class="dropzone">
<div class="dropzone-previews"></div>
<div class="fallback"> <!-- this is the fallback if JS isn't working -->
<input name="file" type="file" multiple />
</div>
</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>
然后，脚本标签....
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// Here's the change from enyo's tutorial...
$("#submit-all").click(function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
}