Javascript Jquery-上传到文本区域后添加图像名称（使用html5Uploader）

我正在尝试发明热水：D。我正在使用，一切都很好（上传的图像没有任何错误）。 在这一部分中，问题出现得有点晚：

onServerLoad: function(e, file) {
    $('.img_upload').on('click', function() {
        $('#text').val($('#text').val() + $(this).attr('title'));
    });
}

值被添加到文本区域，但由于有上传的图像，它被添加了很多次（例如，我有5张名为first.png的图像它将向文本区域添加first.png五次）。我怎样才能避免这种情况

$(function() {
    var fileTemplate = "<div id=\"{{id}}\">";
    fileTemplate += "<div class=\"preview\"></div>";
    fileTemplate += "<div class=\"filename\">{{filename}}</div>";
    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({
        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) {
            $('.img_upload').on('click', function() {
                $('#text').val($('#text').val() + $(this).attr('title'));
            });
        }
    });
});

$（函数（）{
var fileTemplate=“”；
fileTemplate+=“”；
fileTemplate+=“{{filename}}”；
fileTemplate+=“”；
函数slugify（文本）{
text=text.替换（/[^-a-zA-Z0-9，&\s]+/ig'）；
text=text.replace（/-/gi，“”）；
text=text.replace（/\s/gi，“-”）；
返回文本；
}
$（“#dropbox”）.HTML5上传程序({
OnClient LoadStart:函数（e，文件）{
var upload=$（“#upload”）；
if（upload.is（“：hidden”））{
upload.show（）；
}
upload.append（fileTemplate.replace（/{{id}}/g，slugify（file.name））.replace（/{{filename}/g，file.name））；
},
onClientLoad：函数（e，文件）{
$（“#”+slagify（file.name））.find（“.preview”）.append（”；
},
onServerLoad：函数（e，文件）{
$（'.img_upload'）。在（'单击'，函数（）上）{
$（'#text'）.val（$（'#text'）.val（）+$（this.attr（'title'））；
});
}
});
});

一种方法是检查它是否已经存在，如下所示：

var _val = $('#text').val(), title = $(this).attr('title');
if ( _val.indexOf( title ) === -1 ) {
    // here you add the code
    $('#text').val( _val + title );
}

但我认为问题可能在于获取名称的方式，请尝试使用e.target.result或file.name

var _val = $('#text').val(), name = file.name || e.target.result;
if ( _val.indexOf( name ) === -1 ) {
    // here you add the code
    $('#text').val( _val + name );
}

如果您想将同一个添加特定次数，有几种方法可以做到这一点

环路通孔：

// this is if you want to add the duplicates immediately
var
    // the amount of times you want to create the duplicatation
    NUMBER_OF_TIMES = 10,
    // the current value
    _val = $('#text').val(),
    // the title
    title = $(this).attr('title');
if ( _val.indexOf( title ) === -1 ) {
    for ( var i = 0; i < NUMBER_OF_TIMES; i ++ )
        $('#text').val( _val + name );
}

//如果要立即添加重复项，请执行此操作
变量
//要创建复制的次数
_的次数=10，
//当前值
_val=$（'#text'）.val（），
//标题
title=$（this.attr（'title'）；
如果（_val.indexOf（title）=-1）{
对于（var i=0；i

否则，您可以检查出现的次数，然后根据需要追加：

// this is if you want to add the duplicates a certain number of times dynamically
var
    // the amount of times you want to create the duplicatation
    NUMBER_OF_TIMES = 10,
    // the current value
    _val = $('#text').val(),
    // the title
    title = $(this).attr('title')
    // Returns the number of occurences
    howMany = function(str, substr) {
        var intRet = 0;

        // continuously run until the substring isn't found anymore
        while ( str.indexOf(substr) !== -1 ) {
            // get rid of first substring
            str = str.replace(substr, '');
            // add one to the amount of substrings
            intRet++;
        }

        // check to see if there are any occurrences, if not, return -1
        return (intRet > 0 ? intRet : -1);
    };
if ( _val.indexOf( title ) === -1 && howMany(_val, title) <= NUMBER_OF_TIMES ) {
    $('#text').val( _val + name );
}

//如果要动态添加特定次数的重复项，请执行此操作
变量
//要创建复制的次数
_的次数=10，
//当前值
_val=$（'#text'）.val（），
//标题
title=$（this.attr（'title'））
//返回发生的次数
多少=函数（str，substr）{
var intRet=0；
//继续运行，直到再也找不到子字符串为止
while（str.indexOf（substr）！=-1）{
//去掉第一个子串
str=str.replace（substr'，）；
//将一个添加到子字符串的数量中
intRet++；
}
//检查是否存在任何事件，如果没有，则返回-1
返回（整数>0？整数：-1）；
};
if（_val.indexOf（title）==-1&&它工作的（_val，title）数量：）。但这有一个小问题。如果我想把同一个图像的名称重复一次呢。在这一点上，它不允许我这样做。第一。第二个将两个文件名都添加到文本区域。