Как показать предварительный просмотр изображения с помощью jquery перед формой submit в div

Question

Я имею дело с формой, которая содержит различные элементы формы с возможностью загрузки нескольких изображений (до 6 макс.). Теперь у меня есть div preview при нажатии этого div, и я получаю все поля формы, используя 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. Дай мне знать, если т. Е. Какая-то точка двусмысленности сохраняется.

Answer 1

Вам нужно пропустить массив файлов из нескольких входных данных и использовать 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, и если файлы, которые они выбрали, являются файлами изображений.

Answer 2

JSFiddle demo

Это намного лучше, без нажатия на любую кнопку: 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();   
});