如何使用Dropzonejs限制视频的持续时间?

时间:2015-06-26 02:33:48

标签: javascript php jquery file-upload ffmpeg

我有一个表单,我上传视频和视频的持续时间/长度很重要。

用PHP上传文件后,用FFMpeg检查视频文件大小的持续时间。

我用PHP计算持续时间,需要通过PHP以某种方式发送持续时间的值。我想我必须将持续时间附加到Json的$result变量。

这是我的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>

这是我的PHP

<?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);
}

如果我可以在

之后立即检查自定义json响应
 Dropzone.options.myDropzone = {

与其他成功要求一样,我不会为了检查验证而成功。

基本上我想按照我的意愿去做

 maxFiles: 1,

成功

内没有写任何条件

1 个答案:

答案 0 :(得分:0)

据我了解,您希望在客户端获取视频文件的持续时间。可以使用HTML5 API方法。 Original example here

默认情况下,dropzone.js中不支持此操作。您必须自己添加此功能。

以下是在视频文件选择时获取视频持续时间的示例代码(取自coursesweb.net)。

<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>