ajax只執行第一次迭代

Question

<?php 
    error_reporting(0); 
    //$SITE_URL="http://shreebalajiinfotech.com/Android/Download_videos/"; 
    $SITE_URL="http://localhost/"; 
    $DIR="Videos"; 
    if($_REQUEST['category']=="") 
    { 
     echo 'Please pass folder name'; 
    } 
    $dir = $_REQUEST['category']; 
    $result = array(); 
    $SUB=$DIR ."/" .$dir; 
    //var_dump(is_dir($DIR ."/" .$dir)); 
    //$image="http://shreebalajiinfotech.com/Android/Download_videos/Videos/test1/119064635524.jpg"; 
    $cdir = scandir($SUB); 
    //$files2 = scandir($dir, 1); 
    //print_r($cdir);  
    ?>  
     <div id="video_container"> 
     <?php   
     foreach ($cdir as $value) 
     //for ($i=0; $i<count($cdir); $i++) 
     { 
     // if ($cdir[$i] != '.' && $cdir[$i] != '..') 
     //{ 
     //{    
     if (!in_array($value,array(".",".."))) 
     { 
      /*echo "<pre>"; 
      var_dump(each($value)); 
      echo "</pre>"; 
      echo $value; 
      */    
      //echo $key[$value];     
      //print_r($cdir[$i]); 
      $values=explode('.',$value);     
      if($values[1]=="mp4") 
      {     
       //$result[]=$value; 
       //echo $cdir[$i]; 
       //echo "<br/>"; 
     ?> 
     <script src="jquery.min.js"></script> 
     <script type='text/javascript'> 
     window.onload = function(){ 
     // $(document).ready(function(e) { 
     //$('#submit<?=$value;?>').click({ 
     var video = document.getElementById('my_video_<?=$value;?>'); 
     var thecanvas = document.getElementById('thecanvas'); 
     var img = document.getElementById('thumbnail_img'); 
     var div = document.getElementById('Imagecontainer'); 
     var sources = document.getElementById('video<?=$value;?>'); 
     alert(sources.src); 
     var videoname=sources.src.substring(sources.src.lastIndexOf('/')+1); 
      setTimeout(video.pause(draw(video, thecanvas, img,videoname)),6000); 
     if(video.paused==true) 
     { 
       setTimeout(video.play(),2000); 
     } 
     function draw(video, thecanvas, img,videoname) 
     { 
     alert(video); 
     // get the canvas context for drawing 
     var context = thecanvas.getContext('2d'); 
     // draw the video contents into the canvas x, y, width, height 
     context.drawImage(video, 0, 0, thecanvas.width, thecanvas.height); 
     // get the image data from the canvas object 
     var dataURL = thecanvas.toDataURL(); 
     alert(dataURL); 
     // set the source of the img tag 
     var img1 = document.createElement('img'); 
     img1.setAttribute('src', dataURL); 
     document.getElementById('Imagecontainer').appendChild(img1); 
     img1.setAttribute('src', dataURL); 
     $.ajax({ 
     type: "POST", 
     url: "upload.php", 
     data: {image: dataURL,folder:'<?=$_REQUEST['category'];?>',videoname:videoname}, 
     success: function(response) { 
       alert(response); 
       } 
       }); 
     } 
     }; 
     </script> 
     <video id="my_video_<?=$value;?>" class="<?=$value;?>" controls autoplay> 
     <source id="video<?=$value;?>" src="<?=$SITE_URL.$SUB ."/".$value;?>" type="video/mp4" /> 
     </video> 
      <canvas id="thecanvas"> 
     </canvas> 
     <div id="Imagecontainer"></div> 
     <img id="thumbnail_img" alt="Right click to save"/> 
     <?php 
     } 
     ?> 
     <br/> 
     <?php 
     } 
     } 
    ?> </div>    

上面的代碼只對foreach循環中的第一個元素進行迭代。對於其他元素，它有時只取第一個元素的值，但有時會被擠壓。每個循環只能在windows load事件中執行，如何讓這個腳本執行另一個事件。

Answer 1

你想在你的foreach循環中做太多事情。它正在吐出大量的window.onload函數，這對那些試圖理解你的意圖的窮人瀏覽器來說毫無意義。在這種情況下，我認爲你應該把你在php中的視頻文件數組傳遞給一個javascript數組。類似：

<script type='text/javascript'>  
    window.onload = function(){ 
     var videos = <?php echo json_encode($cdir); ?> 

     for(var i = 0; i < videos.length; i++) 
     { 
      //Setup each video 
     } 
    }; 
</script> 

這是通過編碼被稱爲「JavaScript對象表示法」，這JavaScript可以輕而易舉地使用創建一個數組的格式PHP的陣列。一旦你在javascript中的數組而不是php，你可以遍歷每個客戶端，裏面的 window.onload函數，它應該可以解決你遇到的問題。