我正在使用dropzone.js上传多张图片。主要原因是使用户可以上传(拖放)多个图像。
对于上传(存储)图像,它工作正常,可以正常上传,但更新多个图像时有问题,当我dd请求所有没有值
返回多个图像,但只有从请求表单返回值。我已经尝试包含paramName = file,但仍然没有从file获得任何请求。
如何更新多个图像并获取请求值以存储在表中?
edit.blade.php
<script>
let companyId = @json($companies);
Dropzone.autoDiscover = false;
document.addEventListener('DOMContentLoaded', function(e) {
$(document).ready(function() {
(function() {
var myDropzone = new Dropzone("#multipleFileUpload", {
url: '/admin/company/update/' + companyId,
method: 'POST',
paramName: 'file',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
acceptedFiles: ".jpg,.png,.jpeg",
maxFiles: 999,
maxFilesize: 2,
addRemoveLinks: true,
uploadMultiple: false,
autoProcessQueue: false,
parallelUploads: 999,
dictCancelUpload: "Cancel",
dictDefaultMessage: "Please drag & drop images here",
timeout: 5000,
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("submitButton").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("name", jQuery("#name")
.val());
formData.append("email", jQuery("#email")
.val());
formData.append("dropzone", jQuery(
"#multipleFileUpload")
.val());
formData.append("file", document.getElementById(
'multipleFileUpload'));
formData.append("logo", document.getElementById(
'companyLogo').files[0]);
formData.append("phone_number", jQuery(
"#phoneNumber")
.val());
formData.append("fax_number", jQuery("#faxNumber")
.val());
formData.append("address1", jQuery("#address1")
.val());
formData.append("address2", jQuery("#address2")
.val());
formData.append("city", jQuery("#city")
.val());
formData.append("postcode", jQuery("#postcode")
.val());
formData.append("state", jQuery("#state")
.val());
formData.append("country", jQuery("#country")
.val());
formData.append("longitude", jQuery("#longitude")
.val());
formData.append("latitude", jQuery("#latitude")
.val());
});
},
success: function(file, response) {
Swal.fire({
title: 'Success!',
text: 'Image added successfully',
confirmButtonText: 'Ok',
}).then(function() {
window.location.href =
"{{ route('admin.company.index') }}"
});
},
error: function() {
return false
},
init: function() {
var submitButton = document.querySelector("#submit");
myDropzone = this;
submitButton.addEventListener("click", function() {
myDropzone.processQueue();
});
this.on('complete', function() {
if (this.getQueuedFiles().length == 0 && this
.getUploadingFiles()
.length == 0) {
var _this = this;
_this.removeAllFiles();
}
});
}
});
})();
});
});
</script>
<div class="col-12 form-group">
<div class="card">
<div class="card-header">Image Upload</div>
<div class="card-body">
<div class="dropzone" id="multipleFileUpload" name="dropzone">
@foreach ($companies->images as $image)
<div class="img-wrap">
<a href="#" onclick="deleteImage({{ $image->id }})"
class="close btn-delete btn-image-delete"
id="btn-delete"
data-image-id={{ $image->id }}>×</a>
<img class="image-dropzone"
src="{{ asset($image->location) }}" width="100px"
height="100px" alt="image"
style="background-position: center background-attachment: fixed;"
data-image-id="{{ $image->id }}" name="images">
</div>
@endforeach
<input type="hidden" name="upload_image"
value="{{ $image->id }}">
</div>
</div>
</div>
</div>
1条答案
按热度按时间eh57zj3b1#
要上传多个,您需要将
name
属性设置为html元素中的数组。例如:name="images[]"
在每个图像输入。