jquery - 上傳到textarea後添加圖片名稱（使用html5Uploader）

Question

我試圖發明熱水：D。我正在使用html5Uploader，一切工作正常（圖像上傳沒有任何錯誤）。 問題來得有點後者，在這一部分：

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

值被添加到所述textarea的但它是（添加次數作爲有載的圖像例如我有5個圖像與名稱第一.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')); 
      }); 
     } 
    }); 
}); 

Answer 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