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函数，它应该可以解决你遇到的问题。