0

ユーザーが画像をアップロードしてプレビューできるようにするスクリプトがあります。これは非常に基本的なスクリプトであり、必要なことはほぼすべて実行することができましたが、最後の 1 つの点で行き詰まっています。

ユーザーが画像をアップロードすると表示されますが、別の画像をアップロードすると両方が表示されるため、古い画像を新しい画像に置き換えて、一方だけが表示されるようにします。

問題は、スクリプトが新しい画像をリストに追加して、新しい画像だけでなくリストを表示する部分にあります。残念ながら、私の 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 に答える