Как получить массив файлов в Dropzone и отправить за пределы Dropzone

Как получить массив файлов в dropzone и отправить за пределы dropzone

Я пытаюсь интегрировать Dropzone в мою существующую форму. Я использую метод, который создает дропзоны программно. Причина, по которой я это делаю, заключается в том, что моя форма довольно длинная (я сократил ее для этого вопроса). Каждый раз, когда я пытался добавить class="dropzone" к элементу формы, вся форма становилась точкой отбрасывания, что не имело смысла. Поэтому я вложил dropzone внутри формы.

Мне трудно понять, как заставить файл работать так или альтернативным способом. До реализации dropzone я использовал традиционный метод ввода / ввода. Так работает вся моя система загрузки файлов. Если я не могу использовать метод ввода, мне нужно выяснить, как получить значения имени файла в формате массива, а затем отправить через мою функцию отправки.

Это то, что я надеюсь, я могу сохранить файлы при использовании dropzone.

{amp}lt;input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" multiple{amp}gt;

Если нет, то мне нужно структурировать файлы в массив.

Я попробовал этот подход внутри функции dropzone:

 this.on("addedfile", function(file) { /*var allFiles = this.getAcceptedFiles(); console.log(allFiles);*/ dragFileName = file.name; var dragFileSize = file.size; console.log('File added - '   file.name   ' - Size - '   file.size); console.log(dragFileName) }); 

Есть две проблемы с этой стратегией. 1. Имена файлов выводятся по одному за раз и не объединяются. 2. Всякий раз, когда я пытаюсь вызвать dragFileName вне функции dragFileName , ничего не отображается.

В конечном итоге, когда я отправляю форму, мне нужны файлы и имена файлов для отправки через:

 function submit(){ var form = document.getElementById("salesforce_submit"); var formData = new FormData(form); 

Кто-нибудь видит, как я могу это сделать?

Полный код:

 {amp}lt;form action="{amp}lt;?php echo $config['sf_url']; ?{amp}gt;" method="POST" id="salesforce_submit"{amp}gt; {amp}lt;div{amp}gt;{amp}lt;input id="first_name" placeholder="First Name*" name="first_name" type="text"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="dropzone dz-clickable" id="myDropzone"{amp}gt; {amp}lt;div class="dz-default dz-message"{amp}gt;Drop files here or click to upload{amp}lt;/div{amp}gt; {amp}lt;input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" multiple{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button type="submit" class="bigButtonLink bigButton" id="submit-all"{amp}gt; SEND {amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; 

Javascript

 Dropzone.autoDiscover = false; $(document).ready(function() { //File Upload var fileName = ''; var inputs = document.querySelectorAll('.inputfile'); Array.prototype.forEach.call(inputs, function (input) { input.addEventListener('change', function (e) { if (this.files[0].size {amp}gt;= 65000000) { alert("This file is too large to upload. Contact Support for alternate ways to get this to us."); return false; } if (this.files {amp}amp;{amp}amp; this.files.length {amp}gt; 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); else fileName = e.target.value.split('\').pop(); }); }); //here var dragFileName = ''; $('#myDropzone').dropzone ({ //Dropzone.options.myDropzone= { url: 'php/quoteSendTest.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. console.log("Something should be showing for eventListener"); //e.preventDefault(); e.stopPropagation(); dzClosure.processQueue(); }); this.on("addedfile", function(file) { /* Maybe display some more file information on your page */ /*var allFiles = this.getAcceptedFiles(); console.log(allFiles);*/ dragFileName = file.name; var dragFileSize = file.size; console.log('File added - '   file.name   ' - Size - '   file.size); }); //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()); }); console.log(dragFileName); } }); //here var send = false; $('#salesforce_submit').validate({ ignore: [], rules: { first_name: { required: true, minlength: 2 } }, messages: { first_name: { required: "Please enter your first name", minlength: "Your first name seems a bit short, doesn't it?" } }, submitHandler: function() { submit(); }, errorPlacement: function (error, element) { if ($(element).attr('name') == 'interestHidden') { error.insertBefore(element.parent('div')); } else { error.insertAfter(element); // {amp}lt;- default } }, }); //File Upload Check Val var fileNameVal = ''; $('#uploadedFileTest').change(function () { fileNameVal = $('#uploadedFileTest').val(); console.log(fileNameVal); }); function submit(){ var form = document.getElementById("salesforce_submit"); var formData = new FormData(form); $.ajax({ url: '/php/quoteSendTest.php', type: 'POST', data: formData, success: function (data) { var obj = JSON.parse(data); // alert(obj); if(obj.status_code == 200) { HTMLFormElement.prototype.submit.call(form) } else { $('#salesforce_submit')[0].reset(); } if(obj.status_code == 500) { alert(obj.message); } }, cache: false, contentType: false, processData: false }); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector