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

我正在处理一个表单，它包含各种表单元素，可以选择上载多个图像（最多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>

var total_images=1；
函数添加文件字段（）{
总图像++；
如果（总图像数>6）返回；
var str_to_embed='
'；
$（“#image_stack”）.append（str_to_embed）；
}

---

所有内容都在一个页面上进行，因此我需要一个解决方案，如何在预览分区下加载图像。请告诉我是否仍然存在一些模糊点。

您需要从多个输入循环文件数组，并在每个输入上使用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();           

});

//设置变量
var reader=new FileReader（），
i=0，
numFiles=0，
图像文件；
//使用FileReader读取图像i
函数readFile（）{
reader.readAsDataURL（imageFiles[i]）
}
//定义文件被删除时要运行的函数
//读取器已完成文件的读取
reader.onloadend=函数（e）{
//制作一个图像并将其附加到div
var image=$（'
我已经设置了一个JSFIDLE来演示

您可能需要进一步检查用户使用的浏览器是否有FileReader，以及他们选择的文件是否为图像文件。

这是更好的，不点击任何按钮：D

HTML:

<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>

// 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();           
});



JavaScript:

<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>

// 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();           
});

//设置变量
var reader=new FileReader（），
i=0，
numFiles=0，
图像文件；
//使用FileReader读取图像i
函数readFile（）{
reader.readAsDataURL（imageFiles[i]）
}
//定义文件被删除时要运行的函数
//读取器已完成文件的读取
reader.onloadend=函数（e）{
//制作一个图像并将其附加到div
$（“#images”）.css（{'background-image'：'url（'+e.target.result+'））}）；
//如果有更多文件，请再次运行文件读取器
如果（i
您需要将图像实际上载到服务器才能显示预览。AJAX应该是您开始查看的地方。此库允许您上载文件，而无需提交格式`language=“javascript”`已过时。请使用
type=“text/javascript”
或完全忽略它。@rmclood我已经有了一个比这更好的代码，但这不适用于多图像处理，如何插入jquery代码。请检查此链接，让我提出一些建议：）以下浏览器支持FileReader API的详细说明可能重复：因为IE不是其中之一（令人惊讶！）这看起来不是一个好方法。为图片添加样式div#image{width:400px；height:300px}因为现在我把上传的图片作为背景，但是div没有宽度和高度，而且你看不到它的背景。谢谢你的努力：）