Jquery ajax добавляет файлы из первого поля на второй

Question

В общем есть ajax форма, там есть поля загрузки файлов 2 штуки.

<input type="file" id="certificates" name="files[]" multiple="multiple" accept=".jpg, .jpeg, .png" onchange="document.getElementById('upload_certificates').click();" />
<input type="hidden" id="upload_certificates" />

<input type="file" id="other" name="files[]" multiple="multiple" accept=".jpg, .jpeg, .png" onchange="document.getElementById('upload_other').click();" />
<input type="hidden" id="upload_other" />

После того как загрузил первый файлы через ajax страница конечно же не обновилась и файлы загружены. Но когда загружаю второй (через второе поле) к нему добавляются файлы с первого поля тоже. Короче вместо пустого массива files[] для второй формы присутствуют файлы и с первого поля. Если после success поставить location.relod (обновить страницу) То уже норм. Но мне нужно именно без перезагрузки. Пробовал обнулять первое поле перед загрузкой второго через:

$("#certificates").val(null);

Безрезультатно...

Сам код:

$(document).ready(function (e) {
         $('#upload_certificates').on('click', function () {
             var form_data = new FormData();
             var ins = document.getElementById('certificates').files.length;
             for (var x = 0; x < ins; x++) {
                 form_data.append("files[]", document.getElementById('certificates').files[x]);
             }
             if($('#company_name').val() !== '') {
                 $.ajax({
                     url: '/ajaxfile.php',
                     dataType: 'text',
                     cache: false,
                     contentType: false,
                     processData: false,
                     async: true,
                     data: form_data,
                     type: 'post',
                     success: function (response) {
                         alert(response)
                     }
                 });
             }
         });
     });

Второй точно такой же но с другим ID.

Answer 1

Думаю что для нового события нам нужно использовать новый массив, если мы не можем обнулить старый. Но думаю что есть более лаконичное решение этой задачи...

$(document).ready(function (e) {
         $('#upload_certificates').on('click', function () {
             var form_data = new FormData();
             var ins = document.getElementById('certificates').files.length;
             for (var x = 0; x < ins; x++) {
                 form_data.append("certificatefiles[]", document.getElementById('certificates').certificatefiles[x]);
             }
             if($('#company_name').val() !== '') {
                 $.ajax({
                     url: '/ajaxfile.php',
                     dataType: 'text',
                     cache: false,
                     contentType: false,
                     processData: false,
                     async: true,
                     data: form_data,
                     type: 'post',
                     success: function (response) {
                         alert(response)
                     }
                 });
             }
         });
         $('#upload_other').on('click', function () {
             var form_data = new FormData();
             var ins = document.getElementById('other').files.length;
             for (var x = 0; x < ins; x++) {
                 form_data.append("otherfiles[]", document.getElementById('other').otherfiles[x]);
             }
             if($('#company_name').val() !== '') {
                 $.ajax({
                     url: '/ajaxfile.php',
                     dataType: 'text',
                     cache: false,
                     contentType: false,
                     processData: false,
                     async: true,
                     data: form_data,
                     type: 'post',
                     success: function (response) {
                         alert(response)
                     }
                 });
             }
         });
     });

<input type="file" id="certificates" name="certificatefiles[]" multiple="multiple" accept=".jpg, .jpeg, .png" onchange="document.getElementById('upload_certificates').click();" />
<input type="hidden" id="upload_certificates" />

<input type="file" id="other" name="otherfiles[]" multiple="multiple" accept=".jpg, .jpeg, .png" onchange="document.getElementById('upload_other').click();" />
<input type="hidden" id="upload_other" />

БЛОГ НА HUSL

Jquery ajax добавляет файлы из первого поля на второй

Ответы (1 шт):