[英]How to upload multiple images in Django using Dropzone for multiple image fields
[英]Multiple File Upload using dropzone and with other forms fields with FormValidation plugin
這是我在項目中設計的表單圖像現在我的要求是通過單個后端調用上傳多個文件和其他表單值。
<script>
<form class="form-horizontal" name="addColorForm" id="addColorForm"
enctype="multipart/form-data"
method="POST">
//Colour Name and Code fileds
//Files Uploader Plugin (Dropzone)
<input type="file" name="artworkFiles[]" style="visibility: hidden"/>
</form>
現在我的腳本部分
<script>
var validCode = function () { // my custom validation };
FormValidation.validators.validCode = validCode;
FormValidation.formValidation(
document.getElementById('addColorForm'),
{
fields: {
colorName: {
validators: {
notEmpty: {
message: '${message(code:"blank.error.message", default:"This field must be entered")}'
},
}
},
},
plugins: { //Learn more: https://formvalidation.io/guide/plugins
trigger: new FormValidation.plugins.Trigger(),
// Bootstrap Framework Integration
bootstrap: new FormValidation.plugins.Bootstrap(),
// Validate fields when clicking the Submit button
submitButton: new FormValidation.plugins.SubmitButton(),
// Submit the form when all fields are valid
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
}
}
).on('core.form.valid', function () {
saveColor();
});
function saveColor() {
var url = "url";
var form = $("#createArtworkForm");
var formData = new FormData(form[0]);
$.ajax({
url: url,
type: 'POST',
enctype: 'multipart/form-data',
data: formData,
success: function (data) {},
cache: false,
contentType: false,
processData: false,
error: function () { }
});
}
var artworkColorsFiles = $('#kt_dropzone').dropzone({
url: "https://www.google.com", // Set the url for your upload script location
paramName: "media", // The name that will be used to transfer the file
maxFiles: 1,
maxFilesize: 40, // MB
addRemoveLinks: true,
acceptedFiles: "image/*",
autoProcessQueue: false,
accept: function (file) {
//Logic to add multiple files in an input type hidden which is declared above
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function () {
let content = fileReader.result;
$('#artworkFiles').val(content);
file.previewElement.classList.add("dz-success");
}
file.previewElement.classList.add("dz-complete");
}
});
</script>
我的問題是如何實現這一點,或者我應該如何在聲明為可見性隱藏的輸入類型文件字段中添加我的所有文件(最多 3 個)。
我在我的項目中所做的同樣是代碼,希望它能幫助你。 您必須使用懸浮窗功能於sendingmultiple函數發送文件,表單數據你必須通過你FORMDATA添加循環
var data = $("form#OpportunityForm").serializeArray();
$.each(data, function (key, el) {
.append(el.name, el.value);
});
$(document).ready(function () { zdrop = new Dropzone('#dropzone', { url: '@Url.Action("SaveOpportunity", "Masters")', maxFiles: 500, maxFilesize: 300, parallelUploads: 100, addRemoveLinks: true, autoProcessQueue: false, uploadMultiple: true, removeFilePromise: function () { return new Promise((resolve, reject) => { let rand = Math.floor(Math.random() * 3) console.log(rand); if (rand == 0) reject('didnt remove properly'); if (rand > 0) resolve(); }); }, sendingmultiple: function (file, xhr, formData) { var data = $("form#OpportunityForm").serializeArray(); $.each(data, function (key, el) { .append(el.name, el.value); }); debugger $("form#OpportunityForm").find("input[type=file]").each(function (index, field) { const file = field.files[0]; formData.append('itemfile', file); }); }, successmultiple: function (file, responseText) { jQuery('form#OpportunityForm').find('textarea, input').each(function () { jQuery(this).val(''); }); clear(); swal.fire("Opportunity Details Saved!", "Opportunity details Saved Successfully!", "success"); OpportunityMstList(); GetOpportunityMstList(); location.reload(); $("#myModal").modal('hide'); }, });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.