0

ページで、次のコードを使用して、フォルダーからの画像のサムを表示しています。その下に「画像の削除」というリンクがあります。

echo '<li> <a href="Gallery/'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<div id="image" ><img src="Gallery/thumbs/'.$file.'" alt="" /><br>
<a href="javascript:Del();"><font style="font-size:9px">Delete Image</font>';
echo '</a></div></a></li>';

画像の削除では、javascript 関数 Del() を呼び出しています。ユーザーが [画像の削除] をクリックした場合、その画像を含むフォルダー (Gallery/thumbs) から画像のサムを削除する必要があります。

関数 Del は次のとおりです。

 <script type="text/javascript">
function Del(){
    var image_x = document.getElementById('image');
image_x.parentNode.removeChild(image_x);
}
</script>

この関数は、フォルダーからではなく、ページから画像を削除します。また、3番目の画像を削除すると、最初に、次に2番目に順番に削除されます。ユーザーが [イメージの削除] をクリックしたイメージのみを削除したい

皆さんが理解してくれることを願っています。

4

1 に答える 1

0

コメントAJAXで述べたように、サーバーからファイルを物理的に削除するために使用できます。サーバー、データベース、またはファイルから要素を削除するための共通関数を実装することをお勧めします-何でも、一般的には、削除するオブジェクトの渡されたIDを使用して、いくつかのURLを呼び出すだけで済みます-DOM要素を次のように変換しますオブジェクトが正常に削除されたことを示します。

function remove(el, url, callback) {
    $.post(url, {}, function(response) {
        // Expect that the response would be in JSON format (PHP - json_encode())
        response = $.parseJSON(response);

        // and in reponse JSON there should be the attibute called 'code', which is detects if the deleting where successfull,
        // if it's == 0 that's success, if not - error
        if (response.code == 0) {
            el.remove();

            if (typeof callback == 'function') {
                callback(response);
            } 
        }
    });
}

これは、サーバー側の削除を呼び出すために必要な関数です。このコードを使用するには、<a /> この方法で削除を開始するクリック イベントにトリガーをバインドする必要もあります。

$(document).on('click', 'a.delete', function(e) {
    // Do not allow browser go to the link's href
    e.preventDefault();

    // pass, as the first element div, which we need to delete from DOM,
    // as the second argument - URL from <a /> to server-side script
    // and third argument is th ecallback function which will remove() function call if the deleting where successfull
    remove($(this).parents('div:first'), $(this).attr('href'), function(r) {
        // here put the extra code to modify DOM after successfull delete
    });
});

の<a />属性hrefに、ファイルを削除するサーバー側スクリプトへのリンクを配置する必要があります。

それが役立つことを願っています。

于 2012-05-15T14:25:16.007 に答える