2013-04-03 154 views
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显示一条消息。问题是即使我使用append它覆盖div。

回答

5

你然后关闭:

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

这里的documentation


编辑:基于您的更新问题,看来,你可能需要动态地创建为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(); 
    }); 
}); 
+0

哈哈...短而史诗! – 2013-04-03 23:15:45

+1

嘿......我最喜欢的一种问题。 “我该怎么做* *?” – jmar777 2013-04-03 23:16:37

+0

我之前试过这个,并没有工作。我编辑了主帖,因为我没有解释整个过程。 – Netra 2013-04-03 23:28:38

1

jmar是对的。

这里是填充示例命令,以备将来参考。

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

相关问题