如何显示上传图像预览使用jQuery之前表单提交一个div [英] How to show upload image preview using jquery before form submit in a div

问题描述

我正在处理一个包含各种表单元素的表单，并带有一个上传多个图像的选项（最多6个）。现在我有一个div 预览点击该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; 
函数add_file_field（）{
 total_images ++; 
 if（total_images> 6）return; 
 var str_to_embed ='< input name =fileImage []size =40style =width：500px; type =fileonChange =add_file_field（）>< br>'; 
 $（＃image_stack）。append（str_to_embed）; 
} 
< / script> 
  

所有事情都在单页上，所以我需要一个解决方案，我怎样才能加载图像在我的预览div 。让我知道，如果thr是一些歧义点仍然存在。

解决方案

您需要循环通过多个输入文件数组并使用每个FileReader API。

我已经设置了这样的HTML：

 < input type =filemultiple =trueid =files/> 
< input type =submitid =go/> 
< div id =images>< / div> 
  
 
  
  
 
 //设置变量
 var reader = new FileReader（），
i = 0，
 numFiles = 0，
 imageFiles; 
 
 //使用FileReader读取图像
函数readFile（）{
 reader.readAsDataURL（imageFiles [i]）
} 
 
 //定义函数在File 
读取器读取文件时执行
 reader.onloadend = function（e）{
 
 //创建映像并将其附加到div 
 var image = $（'< img>'）。attr（'src'，e.target.result）; 
 $（image）.appendTo（'＃images'）; 
 
 //如果有更多文件再次运行文件读取器
 if（i  i ++; 
 readFile（）; 
} 
}; 
 $ b $（'＃go'）。click（function（）{
 
 imageFiles = document.getElementById（'files'）。files 
 // get文件数
 numFiles = imageFiles.length; 
 readFile（）; 
 
}）; 
  
我已经设置了一个JSFiddle来演示 http://jsfiddle.net/3LB72/  
 
 
你可能想要做更多的检查用户正在使用的浏览器有FileReader，如果他们选择的文件是图像文件。
 
I am dealing with a form that contains various form elements with an option to upload multiple images(upto 6 max). Now i am having a div preview on clicking that div i fetch all form fields using jquery (form still not submitted at this time as its a multi form step1, 2 and 3). Now the problem is that i am fetching all form data with this code - 
var allFormData = $("#myform").serializeArray(); 
Using this another code i am able to show rest of the data in div, but image is not coming. 
$.each(adtitletoshow, function(i, field){
    if( field.name == 'desc'){ 
        $(".add_desc").text(field.value);
    }
});
This is the filed created by JS to upload image.
<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>
All things going on single page so i need a solution that how can i load images under my preview div. Let me know if thr is some point of ambiguity still persists.
解决方案
You need to loop through the files array from the multiple input and use the FileReader API on each.

I've set up the HTML like this:
​<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>​​​​​​​​​​​​​​​​​​​​​​
Then the javascript as follows:
// 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();           

});
I've set up a JSFiddle to demo http://jsfiddle.net/3LB72/

You'll probably want to do more checks on whether the browser the user is using has FileReader and if the files they have chosen are image files.

                        
这篇关于如何显示上传图像预览使用jQuery之前表单提交一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！