如何使用 Dropzonejs 限制视频的持续时间？答案

【问题标题】：How to limit duration of the video with Dropzonejs?如何使用 Dropzonejs 限制视频的持续时间？
【发布时间】：2015-09-12 20:41:06
【问题描述】：

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

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

没有在里面写任何条件成功

【问题讨论】：

标签： javascript php jquery file-upload ffmpeg

【解决方案1】：

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

dropzone.js 默认不支持这个。您必须自己添加此功能。

这是在选择视频文件时获取视频时长的示例代码（取自 courseweb.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>

【讨论】：