0

jquery-html5-uploaderを使用して AJAX 経由でファイルをアップロードしていますが、次の問題があります。ファイルがアップロードされると、アップロードされたファイルごとに * handleSuccess * 関数が呼び出されます。それは私に問題を引き起こしています-画像リンクをクリックすると、テキストエリアに挿入されます。私の場合、すべてのファイルに対して同じ数のリンクが挿入されています。関数を一度だけ呼び出す、または作成されたすべてのオブジェクトを削除して 1 つのオブジェクト (または基本的にこれを防ぐことができるもの) のみを取得するにはどうすればよいですか? コード：

function img_upload(url) {
    {
        var fileTemplate = "<div role=\"id_image\"  id=\"{{id}}\" class=\"clearfix fl slika_prv\" >";
        fileTemplate += "<div class=\"preview\"></div>";
        fileTemplate += "<div class=\"filename\">{{filename}}</div>";
        fileTemplate += "<a href=\"" + url_tmp_delete  + "\"  class=\"image_delete_tmp\" role={{id}}>Obriši Sliku</a>";
        fileTemplate += "</div>";

        function slugify(text) {
            text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
            text = text.replace(/-/gi, "_");
            text = text.replace(/\s/gi, "-");
            return text;
        }
        $("#dropbox").html5Uploader({
            postUrl: url,
            onClientLoadStart: function (e, file) {
                var upload = $("#upload");
                if (upload.is(":hidden")) {
                    upload.show();
                }
                upload.append(fileTemplate.replace(/{{id}}/g, slugify(file.name)).replace(/{{filename}}/g, file.name))
            },
            onClientLoad: function (e, file) {
                $("#" + slugify(file.name))
                    .find(".preview")
                    .append("<img class=img_upload title=\"" + file.name + "\" src=\"" + e.target.result + "\" alt=\"\">");

            },
            onServerLoad: function (e, file) {

            },
            onSuccess : function(e, file, data) {
            var id_slika = slugify(file.name)
            upload_folder = $('#upload');
            upload_folder.find('#' + id_slika).find('a').attr('data-id', data);

                var img_delete = $('.image_delete_tmp');
            handleSuccess(upload_folder);

                delete_image(img_delete, 'tmp');
            }
        });
    }
}

function handleSuccess() {
  var upload_folder = $('#upload');
  console.log(upload_folder.first());
  upload_folder.on('click', 'img', function(e){

    var $this = $(this),
    text = $this.parent().parent().find('a').data('id'),
    img = ('<img src="<?php echo IMG ?>pages/' +  text +  '" />');
    $("#page_srb").insertAtCursor(img);
    // element.remove();
    return false;

});
}

そして、これはファイルをクリックすると得られるものです（これは3つのファイルの場合です）：

<img src="http://localhost/pirot_opstina/public/img/pages/Digital_composite_spring_(9)37.jpg" />
    <img src="http://localhost/pirot_opstina/public/img/pages/Digital_composite_spring_(9)37.jpg" />
    <img src="http://localhost/pirot_opstina/public/img/pages/Digital_composite_spring_(9)37.jpg" />
4

1 に答える 1

0

このプラグインが onSuccessAll のようなものをサポートしていれば簡単です... しかし、見た目ではそうではありません... 画像を 1 つだけ表示するだけの問題である場合は、次のようにします。

function handleSuccess() {
  var upload_folder = $('#upload');
  console.log(upload_folder.first());
  upload_folder.on('click', 'img', function(e){

    if ($(".onlyone").length < 1){
        var $this = $(this),
        text = $this.parent().parent().find('a').data('id'),
        img = ('<img class="onlyone" src="<?php echo IMG ?>pages/' +  text +  '" />');
        $("#page_srb").insertAtCursor(img);
        // element.remove();
        return false;
    }
});
}

そのため、クラスを持つ要素が既に存在するかどうかを確認し、存在onlyoneしない場合にのみ画像を追加します。ただし、画像は最後ではなく最初のアップロードから表示されることを意味します。

于 2013-08-30T16:23:56.287 に答える