如何在表单提交div前使用jquery显示上传图像预览

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下载图像。让我知道如果thr是一些歧义点仍然存在。

Answer 1

您需要遍历多个输入中的文件数组，并在每个输入上使用FileReader API。

我已经设置了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();   
});