3

ID upload_results で dhtml を div に追加しようとしています。これは、div の現在のコンテンツを置き換えずに機能するはずです。

コード: (興味深い部分は一番下にあります)

<script language="JavaScript">
 function do_show() {
      $("#webcamContainer").fadeIn('');
  }

  webcam.set_hook( 'onComplete', 'my_completion_handler' );

  function do_upload() {
       upload to server
      document.getElementById('upload_results').innerHTML = '<div>Uploading...</div>';
      webcam.upload();
  }

  function my_completion_handler(msg) {
       extract URL out of PHP output
      if (msg.match(/(http\:\/\/\S+)/)) {
          var image_url = RegExp.$1;
           show JPEG image in page
          $("#upload_results").fadeIn('');
          //document.getElementById('upload_results').innerHTML = '<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>';// I think here should be something changed
    $('#upload_results').append('<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>');      
           reset camera for another shot
          webcam.reset();
      }
      else alert("PHP Error: " + msg);
  }
 </script>


 <div id="upload_results" class="video_header" style="display:none;"></div><!--add data here , without replace current content in div-->
4

2 に答える 2

6

チェックアウト:insertAdjacentHTMLメソッド:

https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML

于 2013-01-12T23:25:51.213 に答える
5

要素にappendコンテンツを追加するには#upload_results:

$('#upload_results').append('<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>');

を使用することもできます.innerHTML += '[...]';が、既存の DOM を上書きし、要素に以前にアタッチされていた既存のリスナーとデータを破棄するため、通常は悪い習慣と見なされます。

于 2013-01-12T23:23:01.323 に答える