Я имею дело с формой, которая содержит различные элементы формы с возможностью загрузки нескольких изображений (до 6 макс). Теперь у меня есть предварительный preview div при нажатии, что div i извлекает все поля формы, используя jquery (форма все еще не отправлена в это время как ее многоступенчатый шаг1, 2 и 3). Теперь проблема в том, что я извлекаю все данные формы с помощью этого кода –
var allFormData = $("#myform").serializeArray();
Используя этот другой код, я могу показать остальную часть данных в div, но изображение не подходит.
$.each(adtitletoshow, function(i, field){ if( field.name == 'desc'){ $(".add_desc").text(field.value); } });
Это файл, созданный JS для загрузки изображения.
<script type="text/javascript"> var total_images = 1 ; function add_file_field () { total_images++ ; if ( total_images > 6 ) return ; var str_to_embed = '<input name="fileImage[]" size="40" style="width: 500px;" type="file" onChange="add_file_field()"><br>' ; $("#image_stack").append ( str_to_embed ) ; } </script>
Все, что происходит на одной странице, так что мне нужно решение, как я могу загружать изображения в мой div div. Дай мне знать, если т. Е. Какая-то точка двусмысленности сохраняется.
Вам нужно пройти через массив файлов из нескольких входных данных и использовать API FileReader для каждого.
Я настроил HTML следующим образом:
<input type="file" multiple="true" id="files" /> <input type="submit" id="go"/> <div id="images"></div>
Затем javascript выглядит следующим образом:
// set up variables var reader = new FileReader(), i=0, numFiles = 0, imageFiles; // use the FileReader to read image i function readFile() { reader.readAsDataURL(imageFiles[i]) } // define function to be run when the File // reader has finished reading the file reader.onloadend = function(e) { // make an image and append it to the div var image = $('<img>').attr('src', e.target.result); $(image).appendTo('#images'); // if there are more files run the file reader again if (i < numFiles) { i++; readFile(); } }; $('#go').click(function() { imageFiles = document.getElementById('files').files // get the number of files numFiles = imageFiles.length; readFile(); });
Я создал JSFiddle для демонстрации http://jsfiddle.net/3LB72/
Вероятно, вы захотите сделать больше проверок того, использует ли браузер, который использует пользователь, FileReader, и если файлы, которые они выбрали, являются файлами изображений.
Демо-версия JSFiddle
Это намного лучше, без нажатия кнопки: D
HTML:
<input type="file" multiple="true" id="files" /> <input type="submit" id="go"/> <div id="images"></div>
JavaScript:
// set up variables var reader = new FileReader(), i=0, numFiles = 0, imageFiles; // use the FileReader to read image i function readFile() { reader.readAsDataURL(imageFiles[i]) } // define function to be run when the File // reader has finished reading the file reader.onloadend = function(e) { // make an image and append it to the div $("#images").css({'background-image':'url('+e.target.result+')'}); // if there are more files run the file reader again if (i < numFiles) { i++; readFile(); } }; $('#files').live('change', function(){ imageFiles = document.getElementById('files').files // get the number of files numFiles = imageFiles.length; readFile(); });