我目前有一个HTML表单，用户填写他们希望张贴的广告的细节。我现在想能够添加一个dropzone上传出售的项目的图像。
我发现Dropzone.js似乎做了我需要的大部分。但是，在查看文档时，似乎需要将整个表单的类指定为dropzone(而不仅仅是input元素)。这意味着我的整个表单变成了dropzone。
是否有可能使用dropzone只是我的形式的一部分，即只指定元素作为类“dropzone”，而不是整个形式?
我可以使用单独的表单，但我希望用户能够通过一个按钮提交所有内容。
或者，是否有其他库可以做到这一点?
非常感谢
当前回答
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();
});
}
}
其他回答
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();
});
}
}
这里有另一种方法:在您的表单中添加一个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将尝试附加两次
试试这个
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
</div>
JS
<script>
Dropzone.autoDiscover = false;
Dropzone.default.autoDiscover=false;
$("div#myDrop").dropzone({
url: "/file/post",
});
</script>
你可以通过捕捉dropzone中的'sending'事件来修改formData。
dropZone.on('sending', function(data, xhr, formData){
formData.append('fieldname', 'value');
});
我有一个更自动化的解决方案。
HTML:
<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>
JavaScript:
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");
}
}
Laravel:
// Get file content
$file = base64_decode(request('file'));
没有必要禁用DropZone发现和正常的表单提交将能够通过标准表单序列化发送任何其他表单字段的文件。
该机制在处理文件时将文件内容存储为隐藏输入字段中的base64字符串。您可以通过标准的base64_decode()方法将其解码回PHP中的二进制字符串。
我不知道这种方法是否会受到大文件的影响，但它适用于~40MB的文件。
