如何使用Dropzonejs限制视频的持续时间 - How to limit duration of the video with Dropzonejs?

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

在我用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 = {

像其他成功的要求一样，我不必为了检查验证而对成功中的if语句进行纠正。

基本上我想像一样做

 maxFiles: 1,

不在success

中写入任何条件

据我所知，您希望在客户端上获得视频文件的持续时间。使用HTML5 API方法是可能的。此处为原始示例。

默认情况下，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>