xmlhttp --> $_POST immer leer

[Prominenter]

Hi@all

kann auch sein das das eher ins AJAX-Forum gehört ???

 name = encodeURIComponent(filename);
 param='name=' + name + '&data=' + data;
 xmlhttp.open("POST", location.href, true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.setRequestHeader("Content-length", param.length);
 xmlhttp.send(param); 

Die Ausgabe liefert mir jedoch: Notice: Undefined index: name

Hab schon GET ausprobiert - passiert aber auch nichts

Thx@all

[h3ll]

Warum verwendest du nicht einfach jQuery?

Hast du dir den Request schon mal im Debugger deines Browsers angeschaut? Ist der korrekt?

[Prominenter]

Warum verwendest du nicht einfach jQuery?

Wie ???

Hast du dir den Request schon mal im Debugger deines Browsers angeschaut? Ist der korrekt?

Da kann ich nichts auffälliges finden !?

ich poste hier nochmal den kompletten Code

<?php
// Speicherort für Thumbnails
$thumbs_dir = 'luft/thumbs/';

//Liste der Videos
$videos = array('video_01.mp4', 'video_02.mp4', 'video_03.mp4');
print_r($_POST);
if( $_POST["name"] )
{
 // Grab the MIME type and the data with a regex for convenience
 if (!preg_match('/data:([^;]*);base64,(.*)/', $_POST['data'], $matches)) 
 {
 die("error");
 }
 // Decode the data
 $data = $matches[2];
 $data = str_replace(' ','+',$data);
 $data = base64_decode($data);
  
 file_put_contents($thumbs_dir.$file, $data);
 
 print 'done '.$name;
 exit;
}
?>

<!-- HTML -->
<video id="video" src=""  onerror="failed(event)" controls="controls" preload="none" style="width:720px;"></video>

<script>
var videos = <?=json_encode($videos);?>;
var index = 0;
var video = document.getElementById('video');

video.addEventListener('canplay', function() 
{
 //this.currentTime = this.duration / 2; // Thumbnail generierenbei Hälfte des Videos
 this.currentTime = this.currentTime+10; // Thumbnail bei 10sec.
}, false);

video.addEventListener('seeked', function() 
{
 getThumb();
}, false);

function nextVideo()
{
 if(videos[index])
 {        
  video.src = 'luft/'+videos[index];
  console.log(index);
  console.log('loading: '+video.src);
  video.load();
  index++;
 }
 else
 {
  console.log('done');
 }
}

function getThumb()
{
 var filename = video.src;
 var w = video.videoWidth;  //video.videoWidth * scaleFactor;
 var h = video.videoHeight; //video.videoHeight * scaleFactor;
 var canvas = document.createElement('canvas');

 canvas.width = w;
 canvas.height = h;
 var ctx = canvas.getContext('2d');
 ctx.drawImage(video, 0, 0, w, h);

 //document.body.appendChild(canvas);
 var data = canvas.toDataURL("image/jpg");
    
 //send to php script
 var xmlhttp = new XMLHttpRequest;
 xmlhttp.onreadystatechange = function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   console.log('saved');
   nextVideo();
  }
 }
 console.log('saving');

 name = encodeURIComponent(filename);
 param="name=" + name + "&data=" + data;
 xmlhttp.open("POST", location.href, true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
 xmlhttp.setRequestHeader("Content-length", param.length);
 xmlhttp.send(param);
}

function failed(e) 
{
 // video playback failed - show a message saying why
 switch (e.target.error.code) 
 {
  case e.target.error.MEDIA_ERR_ABORTED:
  console.log('You aborted the video playback.');
  break;
  case e.target.error.MEDIA_ERR_NETWORK:
  console.log('A network error caused the video download to fail part-way.');
  break;
  case e.target.error.MEDIA_ERR_DECODE:
  console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
  break;
  case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
  console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
  break;
  default:
  console.log('An unknown error occurred.');
  break;
 }
 
 nextVideo();
}
//let's go
nextVideo();
</script>

Ziel ist es das generierte Canvas-Image abzuspeichern, aber wie gesagt irgendwie wird nicht übergeben ???

Bitte um Hilfe -THX@ALL

[h3ll]

Wie ???

jQuery.post() | jQuery API Documentation

ich poste hier nochmal den kompletten Code

<?php
// Speicherort für Thumbnails
$thumbs_dir = 'luft/thumbs/';

//Liste der Videos
$videos = array('video_01.mp4', 'video_02.mp4', 'video_03.mp4');
print_r($_POST);
if( $_POST["name"] )
{
 // Grab the MIME type and the data with a regex for convenience
 if (!preg_match('/data:([^;]*);base64,(.*)/', $_POST['data'], $matches)) 
 {
 die("error");
 }
 // Decode the data
 $data = $matches[2];
 $data = str_replace(' ','+',$data);
 $data = base64_decode($data);
  
 file_put_contents($thumbs_dir.$file, $data);
 
 print 'done '.$name;
 exit;
}
?>

<!-- HTML -->
<video id="video" src=""  onerror="failed(event)" controls="controls" preload="none" style="width:720px;"></video>

<script>
var videos = <?=json_encode($videos);?>;
var index = 0;
var video = document.getElementById('video');

video.addEventListener('canplay', function() 
{
 //this.currentTime = this.duration / 2; // Thumbnail generierenbei Hälfte des Videos
 this.currentTime = this.currentTime+10; // Thumbnail bei 10sec.
}, false);

video.addEventListener('seeked', function() 
{
 getThumb();
}, false);

function nextVideo()
{
 if(videos[index])
 {        
  video.src = 'luft/'+videos[index];
  console.log(index);
  console.log('loading: '+video.src);
  video.load();
  index++;
 }
 else
 {
  console.log('done');
 }
}

function getThumb()
{
 var filename = video.src;
 var w = video.videoWidth;  //video.videoWidth * scaleFactor;
 var h = video.videoHeight; //video.videoHeight * scaleFactor;
 var canvas = document.createElement('canvas');

 canvas.width = w;
 canvas.height = h;
 var ctx = canvas.getContext('2d');
 ctx.drawImage(video, 0, 0, w, h);

 //document.body.appendChild(canvas);
 var data = canvas.toDataURL("image/jpg");
    
 //send to php script
 var xmlhttp = new XMLHttpRequest;
 xmlhttp.onreadystatechange = function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   console.log('saved');
   nextVideo();
  }
 }
 console.log('saving');

 name = encodeURIComponent(filename);
 param="name=" + name + "&data=" + data;
 xmlhttp.open("POST", location.href, true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
 xmlhttp.setRequestHeader("Content-length", param.length);
 xmlhttp.send(param);
}

function failed(e) 
{
 // video playback failed - show a message saying why
 switch (e.target.error.code) 
 {
  case e.target.error.MEDIA_ERR_ABORTED:
  console.log('You aborted the video playback.');
  break;
  case e.target.error.MEDIA_ERR_NETWORK:
  console.log('A network error caused the video download to fail part-way.');
  break;
  case e.target.error.MEDIA_ERR_DECODE:
  console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
  break;
  case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
  console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
  break;
  default:
  console.log('An unknown error occurred.');
  break;
 }
 
 nextVideo();
}
//let's go
nextVideo();
</script>

Ziel ist es das generierte Canvas-Image abzuspeichern, aber wie gesagt irgendwie wird nicht übergeben ???

Bitte um Hilfe -THX@ALL

Sieht für mich nach ein Dateiupload aus. Warum dann nicht einen richtigen Dateiupload machen, statt die Daten in Text zu konvertieren, nur um sie in PHP dann wieder zurück zu konvertieren?