2015-06-26 9 views
6

Ich habe ein Formular, das ich Videos hochladen und die Dauer/Länge des Videos ist wichtig.Wie kann man die Dauer des Videos mit Dropzonejs begrenzen?

Nachdem ich die Datei mit PHP hochgeladen habe, überprüfe ich die Dauer der Videodateigröße mit FFMpeg.

Ich berechne Dauer in PHP und muss Wert der Dauer irgendwie über PHP senden. Ich denke, ich muss die Dauer an $result Variable von Json anhängen.

Das ist mein html

<!DOCTYPE html> 
<html> 
    <head> 

     <script src= 
     "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script> 
     <link href="css/dropzone.css" rel="stylesheet"> 
     <script type="text/javascript"> 

     Dropzone.options.myDropzone = { 

     maxFiles: 1, 
     acceptedFiles: "image/*,video/*", 
     maxfilesexceeded: function (file) { 
      this.removeAllFiles(); 
      this.addFile(file); 
      $('#infomsg').hide(); 

     }, 

     init: function() { 
      $('#infomsg').hide(); 

      this.on("success", function (result) { 

       $('#infomsg').show(); 


       $("#boatAddForm").append($('<input type="hidden" ' + 
        'name="files[]" ' + 
        'value="' + result.name + '">')); 

      }); 
     } 
     }; 


     </script> 
     <title></title> 
    </head> 
    <body> 
     <p> 
      This is the most minimal example of Dropzone. The upload in this 
      example doesn't work, because there is no actual server to handle 
      the file upload. 
     </p><!-- Change /upload-target to your upload address --> 
     <form action="/dropzone/upload.php" class="dropzone" id="my-dropzone" 
     name="my-dropzone"></form> 
     <form action="/dropzone/son.php" id="boatAddForm" method="post" name= 
     "boatAddForm"> 
      <input class="submit" type="submit"> 
     </form> 
    </body> 
</html> 

Das ist mein PHP ist

<?php 
$ds   = DIRECTORY_SEPARATOR; 

$storeFolder = 'uploads'; 

if (!empty($_FILES)) { 

    $tempFile = $_FILES['file']['tmp_name']; 

    $targetPath = dirname(__FILE__) . $ds. $storeFolder . $ds; 

    $targetFile = $targetPath. $_FILES['file']['name']; 

    move_uploaded_file($tempFile,$targetFile); 

} else { 
    $result = array(); 

    $files = scandir($storeFolder);     //1 
    if (false!==$files) { 
     foreach ($files as $file) { 
      if ('.'!=$file && '..'!=$file) {  //2 
       $obj['name'] = $file; 
       $obj['size'] = filesize($storeFolder.$ds.$file); 
       $result[] = $obj; 
      } 
     } 
    } 

    header('Content-type: text/json');    //3 
    header('Content-type: application/json'); 
    echo json_encode($result); 
} 

Wenn ich für den Erfolg

Dropzone.options.myDropzone = { 

wie andere Anforderungen direkt nach einer benutzerdefinierten json Antwort überprüfen konnte ich muss nicht, wenn Aussagen in Erfolg, um die Validierung zu überprüfen.

Grundsätzlich möchte ich es tun, wie ich wie tun

maxFiles: 1, 

ohne irgendwelche Bedingungen innerhalb Erfolg zu schreiben

Antwort

0

Soweit ich verstehe, wollen Sie die Dauer der Videodatei auf dem Client erhalten -Seite. Es ist möglich, HTML5-API-Methoden zu verwenden. Original example here.

In Dropzone.js ist dies standardmäßig nicht möglich. Sie müssen diese Funktionalität selbst hinzufügen.

Hier ist der Beispielcode, um die Dauer des Videos bei der Videodateiauswahl (aus curseweb.net) zu erhalten.

<form action="#" method="post" enctype="multipart/form-data"> 
    File: <input type="file" name="fup" id="fup" /><br> 
    Duration: <input type="text" name="f_du" id="f_du" size="5" /> seconds<br> 
    <input type="submit" value="Upload" /> 
</form> 
<audio id="audio"></audio> 

<script> 
// Code to get duration of audio /video file before upload - from: http://coursesweb.net/ 

//register canplaythrough event to #audio element to can get duration 
var f_duration =0; //store duration 
document.getElementById('audio').addEventListener('canplaythrough', function(e){ 
    //add duration in the input field #f_du 
    f_duration = Math.round(e.currentTarget.duration); 
    document.getElementById('f_du').value = f_duration; 
    URL.revokeObjectURL(obUrl); 
}); 

//when select a file, create an ObjectURL with the file and add it in the #audio element 
var obUrl; 
document.getElementById('fup').addEventListener('change', function(e){ 
    var file = e.currentTarget.files[0]; 
    //check file extension for audio/video type 
    if(file.name.match(/\.(avi|mp3|mp4|mpeg|ogg)$/i)){ 
    obUrl = URL.createObjectURL(file); 
    document.getElementById('audio').setAttribute('src', obUrl); 
    } 
}); 
</script> 
Verwandte Themen