0

我正在使用jquery-html5-uploader通过 AJAX 上传文件，我遇到了以下问题。当文件被上传时，* handleSuccess * 函数被调用 - 对于每个上传的文件。这给我带来了一个问题-当您单击图像链接时，正在将其插入文本区域。就我而言，对于每个文件，都插入了相同数量的链接。我怎样才能只调用一次函数，或者删除所有创建的对象并只获取一个对象（或者基本上任何可以阻止这种情况的对象）？代码：

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 之类的东西会很容易......但它看起来并不......如果只是只显示一个图像的问题，我会：

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 回答