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

Question

我正在处理一个包含各种表单元素的表单，并且可以选择上传多个图像(最多 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 ;
    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

您需要循环访问多个输入中的文件数组，并在每个输入上使用 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 以及他们选择的文件是否是图像文件进行更多检查。