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

これはどうですか..

私はあなたが何をしたいのかまだ混乱しています..しかし、事後、DOMの準備ができたときに画像がそこになかったため、クリックイベントは機能しませんでした

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 に答える
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 に答える