如何使用Dropzonejs限制视频时长？

Question

如何使用Dropzonejs限制视频时长？

javascriptphpjqueryfile-uploadffmpeg

6

我有一个表格，可以上传视频并且视频的长度/时长非常重要。

在我使用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里面编写任何条件

- SNaRe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Usama Ejaz · Answer 1

据我理解，您想在客户端获取视频文件的持续时间。使用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>