Как сделать массив HTML FormData

У меня ФОРМЫ HTML с двумя полями типом текст и типа входного файл ПолеКак сделать массив HTML FormData

Это код ниже

<form id="myForm" method="post"> 
    First name: <input type="text" id="fname" name="fname"><br> 
    Files: <input type="file" id="files" name="files" multiple><br/> 
</form> 
<br><br><br> 
<input type="button" value="Add To Container" class="addtocontainer"> 
<input type="button" value="Submit Ajax call " class="callAjax">

Когда пользователь заполняет эти поля , и клики на кнопке «Добавить в контейнер», он будет добавлен в массив (Пользователь может добавить в массив столько, сколько форм)

И, наконец, он нажимает кнопку «Отправить», чтобы вставить все содержимое массива в базу данных через Ajax call

Это мой код

var newArr=[]; 

$(document).on("click", ".addtocontainer", function(event) { 
    var form = $('form')[0]; 
    var formData = new FormData(form); 
    newArr.push(formData); 
    $("#fname").val(''); 
    $("#files").val(''); 
}); 

$(document).on("click", ".callAjax", function(event) { 
    for(var i=0;i<newArr.length;i++) 
    { 
    console.log(newArr[i]); 
    } 
});

В случае callAjax я получаю FomData пустым, когда я извлечения его через цикл массив Не могли бы вы сказать мне, если это правильный подход или нет

Это моя скрипка

http://jsfiddle.net/fx7su2rp/290/

источник

2016-09-29 Pawan

Пробовали ли вы с 'serializeArray()'? –

Попробуйте некоторые вещи, как это так:

<script> 
$(document).ready(function(){ 
    $('#upload').on('click', function() { 
     var file_data = $('#pic').prop('files')[0]; 
     var form_data = new FormData(); 
     form_data.append('file', file_data); 

     form_data.append('index', value); 
     form_data.append('index', value); 
     // you can send multiple index => value pair as you want 

     $.ajax({ 
       url   : 'upload.php',  // point to server-side PHP script 
       dataType : 'text',   // what to expect back from the PHP script, if anything 
       cache  : false, 
       contentType : false, 
       processData : false, 
       data  : form_data,       
       type  : 'post', 
       success  : function(output){ 
        alert(output);    // display response from the PHP script, if any 
       } 
     }); 
     $('#pic').val('');      /* Clear the file container */ 
    }); 
}); 
</script> 
</head> 

<body> 
<input id="pic" type="file" name="pic" /> 
<button id="upload">Upload</button> 
</body> 
</html>

Это будет нормально работать для загрузки изображения с использованием ajax.

источник

2016-09-29 10:04:49

здесь мне нужно отправить несколько FormData, приведенный выше код работает для одной формы – Pawan

Проверьте обновленный ответ. –

Спасибо, это сработало для меня, но как вы справились с этим в конце? У вас используется java любым chnace? – Pawan

Воспользоваться serializeArray вместо FormData в

var formData = $(form).serializeArray();

PS: serializeArray не работает для загрузки файлов в JavaScript не имеет доступ к содержимому файла, который вводится в этой области. В большинство браузеров могут разрешить доступ к имени файла. Любая обработка , которую вы хотите сделать с файлом, должна быть сделана на сервере после , она загружается во временное рабочее пространство.

Вы можете сделать это, как этот

var formData = $(form).serializeArray(); 
    formData.push($('input[name="files"]').val());

JSFIDDLE

источник

2016-09-29 10:08:43

Спасибо, это сработало для меня. – Pawan

, но почему он не показывает имя изображения в форме во время цикла через массив http://jsfiddle.net/fx7su2rp/294/ ?? – Pawan

serializeArray не работает для загрузки файлов, так как «JavaScript не имеет доступа к содержимому файла, который вводится в это поле. В лучшем случае браузер может разрешить доступ к имени файла. Любая обработка, которую вы хотите сделать с файлом, должна выполняться на сервере после ее загрузки во временную рабочую область. –

Как сделать массив HTML FormData

ответ

Смежные вопросы