如何在 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();           
});