使用webupload+thinphp上传mp4大文件视频。

119 阅读1分钟

大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件.

html代码如下

                <link rel="stylesheet" type="text/css" href="../Public/css/webuploader.css" />
                <link rel="stylesheet" type="text/css" href="../Public/css/style.css" />
                <script type="text/javascript" src="../Public/js/jquery.js"></script>
                <div id="wrapper">
                    <div id="container">
                        <!--头部,相册选择和格式选择-->

                        <div id="uploader">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker"></div>
                                    <p>或将文件拖到这里</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display:none;">
                                <div class="progress">
                                    <span class="text">0%</span>
                                    <span class="percentage"></span>
                                </div><div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<!--                <script type="text/javascript" src="../Public/js/jquery.js"></script>-->
                <script type="text/javascript">
                   var uploadServerFileUrl = '{:U("Fileupload/fileupload")}';
                </script>
                <script type="text/javascript" src="../Public/dist/webuploader.js"></script>
                <script type="text/javascript" src="../Public/js/uploadfile.js"></script>
                
                <!-- 上传视频 -->

uploadfile.js 主要配置 如下

// 获取上传成功之后
uploader.on('uploadSuccess', function (file, response) {
    console.log(file)
    console.log(response)
});

response 可以显示上传成功后返回的ajax详细信息

        // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择文件'
            },
            formData: {
                uid: 123
            },
            dnd: '#uploader .queueList',
            paste: '#uploader',
            swf: '../../dist/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server:上传服务器地址,
            accept: {
                title: '视频上传',
                extensions: 'mp4',
                mimeTypes: 'video/mp4'
            },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024 * 10    // 50 M
        });

其中nginx需要设置

找到自己主机的nginx.conf配置文件,打开在http{}中加入 client_max_body_size 10m;
然后重启nginx/etc/init.d/nginx restart

php.ini需要设置

pload_max_filesize = 100M
post_max_size = 100M