0

我有一个脚本，允许用户上传图像并预览它们。这是一个非常基本的脚本，虽然我已经设法让它或多或少地完成我需要的所有事情，但我仍然坚持最后一件事。

就目前而言，一旦用户上传了一张图片，它就会显示，但如果他们上传另一张图片，它会同时显示两者，我希望新图片替换旧图片，因此只有一张可见。

我在 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>

任何帮助将不胜感激

4

1 回答 1

1

代替：

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

尝试：

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

#files这将在添加新内容之前清空元素。

于 2013-01-15T10:13:51.517 回答