[英]How to upload more than 2 files by Dropzone.js with button
我做了一個簡單的表格來上傳文件。 使用表單,我可以將多個文件添加到隊列中。 使用特殊按鈕,我可以從隊列中刪除文件。 但是由於某種原因,它不能以我想要的方式工作。 通過單擊“卸載文件”,只有2個文件正在上載到服務器。 如果我第二次單擊,則第二個文件正在上傳。 所有代碼都在下面。 如何通過單擊一個按鈕上傳所有文件? 提前致謝。
HTML:
<div class="panel panel-default">
<div class="panel-heading">
<strong>Прикрепить файлы</strong>
</div>
<div class="panel-body">
<button type="button" class="btn btn-primary" id="add-file">
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Обзор...
</button>
<button type="button" class="btn btn-primary" id="upload-file">
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Загрузить
</button>
<ul class="list-group dropzone-previews" style="margin-top: 10px; margin-bottom: 0;"></ul>
</div>
</div>
JS:
$(".panel").dropzone({
url: "upload.php",
autoProcessQueue: false,
init: function() {
var myDropzone = this;
$('#upload-file').click(function() {
myDropzone.processQueue();
});
},
clickable: '#add-file',
acceptedFiles: 'image/*,application/pdf,application/msword',
previewsContainer: '.dropzone-previews',
previewTemplate: '<li class="working list-group-item">' +
'<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' +
'<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' +
'<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
'</div></li>'
});
還有我在PHP上的服務器腳本:
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$targetFile = $targetPath. $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
}
?>
只需將parallelUploads的值增加到10或20即可。默認情況下,它將一次向服務器發送兩個文件,因此您需要增加parallelUploads的值才能工作。
$(".panel").dropzone({
url: "upload.php",
autoProcessQueue: false,
init: function () {
var myDropzone = this;
},
parallelUploads: 20,
clickable: '#add-file',
acceptedFiles: 'image/*,application/pdf,application/msword',
previewsContainer: '.dropzone-previews',
previewTemplate: '<li class="working list-group-item">' +
'<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' +
'<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' +
'<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
'</div></li>'
});
$('#upload-file').click(function () {
myDropzone.processQueue();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.