0

私はお湯を発明しようとしています：D。私はhtml5Uploaderを使用していますが、すべてが正常に機能しています（画像はエラーなしでアップロードされています）。この部分では、問題は少し遅れて発生します。

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

値はテキストエリアに追加されていますが、アップロードされた画像があるため、何度も追加されます（たとえば、first.pngという名前の画像が5つある場合、テキストエリアにfirst.pngが5回追加 されます）。どうすればこれを回避できますか？

$(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'));
            });
        }
    });
});
4

1 に答える 1

1

1 つの方法は、次のように、既に存在するかどうかを確認することです。

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 );
}

同じものを特定の回数だけ追加したい場合は、いくつかの方法があります。

for ループ経由:

// 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 );
}

それ以外の場合は、出現回数を確認し、必要に応じて追加できます。

// 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 );
}

コメントはできるだけ有益なものになるように努めましたが、その一部が理解できない場合は、以下にコメントしてください。それを試してみて、それがどうなるか教えてください！XD

于 2012-11-22T21:53:53.010 に答える