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元素。

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

1 个答案: