0

我有这段代码,我正在处理,我试图追加而不是覆盖#preview div。我正在为 jquery 使用 JqueryForm 插件。

 $(document).ready(function() { 
    $('#photoimg').on('change', function() { 
        $("#preview").html('<img src="load.gif" alt="Uploading"/>');
        $("#imageform").ajaxForm({
        target: '#preview'
    }).submit();

        });
    });

我不太确定我怎么能做到这一点。

稍后编辑:我有这个表格:

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>

当我浏览并选择图像时,ajaximage.php 会验证并上传图像,如果成功,它将回显 #preview div 中显示的消息。问题是即使我使用附加它也会覆盖 div。

4

2 回答 2

5

你很接近了:

$("#preview").append('<img src="load.gif" alt="Uploading"/>');

这是文档


编辑:根据您更新的问题,您可能需要动态创建一个目标供ajaxForm插件使用。这是一个例子:

$(document).ready(function() { 
    $('#photoimg').on('change', function() { 
        $("#preview").html('<img src="load.gif" alt="Uploading"/>');
        // create a dynamic target that we'll add to #preview
        var $target = $('<div />').appendTo('#preview');
        $target.attr('id', 'preview-target-' + Math.ceil(Math.random()*999999));
        $("#imageform").ajaxForm({
            // use the new target element's id for the ajaxForm target
            target: '#' + $target.attr('id')
        }).submit();
    });
});
于 2013-04-03T23:14:40.930 回答
1

杰马尔是对的。

这是它的填写示例命令,以供将来参考。

$('#idoftarget').append('<div>new stuff</div>');

于 2013-04-03T23:17:41.563 回答