[英]AjaxForm, update html not working
I have a form to upload photos. 我有一个上传照片的表格。 After uploading the picture is displayed in the UL LI.
上传后,图片将显示在UL LI中。 The problem, if I bring up another image, the previous image is deleted and the new image is displayed only.
问题是,如果我调出另一张图像,则先前的图像将被删除,而仅显示新的图像。 Would appreciate help
希望得到帮助
index.php: index.php文件:
<form name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="image_upload.php">
<input type="hidden" name="image_form_submit" value="1"/>
<label>Add new</label>
<input type="file" name="images[]" id="images" multiple >
<div class="uploading none">
<label> </label>
<img src="images/uploading.gif"/>
</div>
</form>
<div class="gallery" id="images_preview">
<ul class="reorder_ul reorder-photos-list">
</ul>
</div>
JS: JS:
$(document).ready(function(){
$('#images').on('change',function(){
$('#multiple_upload_form').ajaxForm({
target:'#images_preview ul',
beforeSubmit:function(e){
$('.uploading').show();
},
success:function(html){
$('.uploading').hide();
},
error:function(e){
}
}).submit();
});
});
image_upload.php: image_upload.php:
<?php
if($_POST['image_form_submit'] == 1)
{
$images_arr = array();
foreach($_FILES['images']['name'] as $key=>$val){
$image_name = $_FILES['images']['name'][$key];
$tmp_name = $_FILES['images']['tmp_name'][$key];
$size = $_FILES['images']['size'][$key];
$type = $_FILES['images']['type'][$key];
$error = $_FILES['images']['error'][$key];
$target_dir = "../uploads/";
$target_file = $target_dir.time().$_FILES['images']['name'][$key];
if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
$images_arr[] = $target_file;
}
//$extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);
//$images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
}
//Generate images view
if(!empty($images_arr)){ $count=0;
foreach($images_arr as $image_src){ $count++?>
<li id="image_li_<?php echo $count; ?>" class="ui-sortable-handle">
<a href="javascript:void(0);" style="float:none;" class="image_link"><img src="<?php echo $image_src; ?>" alt=""></a>
</li>
<?php }
}
}
?>
You could save the old content in a variable before it is replaced by the response: 您可以将旧内容保存在变量中,然后将其替换为响应:
` `
var old;
$('#images').on('change',function(){
old = $('#images_preview ul').html();
$('#multiple_upload_form').ajaxForm({
[...]
success: function(){
$('.uploading').hide();
$('#images_preview ul').append(old);
` `
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.