Question

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

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" />

Answer 1

如果这个插件支持像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的元素，并且只有在没有它的情况下才会添加图像。但是，这意味着图像将从第一次上传而不是最后一次显示。

AJAX - 为每个上传的文件调用函数

1 个答案: