用javascript替换图像而不是添加到列表

Question

我有一个脚本，允许用户上传图像并预览它们。这是一个非常基本的脚本，尽管我已经设法让它做更多或更少的事情，我需要的是最后一件事。

当用户上传图片时会显示它，但是如果他们上传另一个图片，它会同时显示这两个图片，我希望新图片替换旧图片，以便只显示一个图片。

我没有问题的PHP方面的事情，问题出在脚本附加新的图像列表和显示列表而不是仅仅是新的图像的部分，不幸的是我的JavaScript知识是相当有限的在这一刻。

这是脚本：

$(function(){ 
    var btnUpload=$('#upload'); 
    var status=$('#status'); 
    new AjaxUpload(btnUpload, { 
     action: 'upload-file.php', 
     name: 'uploadfile', 
     onSubmit: function(file, ext){ 
      if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
       // extension is not allowed 
       status.text('Only JPG, PNG or GIF files are allowed'); 
       return false; 
      } 
      status.text('Uploading...'); 
     }, 
     onComplete: function(file, response){ 
      //On completion clear the status 
      status.text(''); 
      //Add uploaded file to list 
      if(response==="success"){ 
       $('<li></li>').appendTo('#files').html('<img src="upload/'+file+'" alt="" /><br />'+file); 
      } else{ 
       $('<li></li>').appendTo('#files').text(file); 
      } 
     } 
    }); 

}); 

，这里是显示图像：

<ul id="files" ></ul> 

任何帮助将受到欢迎

Answer 1

相反的：

$('<li></li>').appendTo('#files') 

试试：

$('<li></li>').appendTo($('#files').empty()) 

这会在追加新内容之前清空#files元素。