0

我有一个图像上传预览。而且，当用户单击时.thumb，我想克隆输入的文本名称并显示它。但clone()不工作。

谢谢

JSFIDDLE

HTML

<input type="file" id="files" name="files[]" multiple /><br />
<output id="list"></output><br />
<p>Name:<input type="text" class="name"/><p>
<br />

JS

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;

  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

$('.thumb').click(function() {
$('p').clone();
});
4

2 回答 2

0

我认为这会做你想做的事。我不知道您对 .click 做了什么，但我将 HTML 移到了生成拇指的循环中。

小提琴：http: //jsfiddle.net/howderek/emTAX/17/

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        $('.name').clone().appendTo(".name");
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;

        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ('<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/><p>Name:<input type="text" class="name" /></p>');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
于 2013-10-17T14:43:12.783 回答
0

那这个呢..

我仍然对你想做什么感到困惑..但是由于在 dom 准备好时图像不存在，所以 click 事件不起作用，事后

http://jsfiddle.net/emTAX/25/

$('body').on("click",".thumb",function() {
     var myclone = $("p input").clone();
    $('p:first').append(myclone);
});

append() 比 appendTo() 快

基本上使用 on() 将保持事件监听 .thumb 然后将事件附加到它上面

http://api.jquery.com/on/

于 2013-10-17T14:38:12.040 回答