PHP + ajax 实现上传进度条、PHP 上传大视频

一、PHP + ajax 实现上传进度条

---

1.1 CSS 样式

根据自身调整哦！

.processBar{display: inline-block;width: 0;height: 7px;left: 500px;top: 14px;background: #0E9C91;}
.processNum{position: absolute;left: 710px;color: #0E9C91;font-size: 12px;line-height: 22px;}

---

1.2 页面 HTML

<video class='video_src' style="width: 600px; height: 400px;" src="" controls="controls">video>

<input class="upfile" id="FileUpload" type=file name='upfile' size='1' style="display: none;" onchange="fileChange(event)">

<div class="video_upload">上传视频div>

<span class="processBar">span>
<span class="processNum">span>

---

1.3 js 代码

// 进度条
var processBar = $(".processBar");

// 进度数
var processNum = $(".processNum");

// 默认进度条宽度为0
processBar.css("width",0);


// 点击上传视频按钮
$(".video_upload").click(function () {
    $(".upfile").click();
})

// 文件改变事件
function fileChange(e) {

    var e = e || window.event;
    
    var files = e.target.files;
    if (files.length > 0) {
        var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
            alertTips(false, '请选择视频');
            return;
        }

        if(fileObj.size / 1024 > 1024 * 100){
            alertTips(false, '请上传 MP4、MPEG、3GP、AVI 格式且小于 100M 的视频');
            return false;
        }

        var formFile = new FormData();
        formFile.append("action", "uploadVideo");
        formFile.append("file", fileObj); // 加入文件对象
        var data = formFile;

        $.ajax({
            url: "video.php",
            data: data,
            type: "Post",
            dataType: "json",
            cache: false,//上传文件无需缓存
            processData: false, // 用于对data参数进行序列化处理 这里必须false
            contentType: false, // 不设置 http 头
            xhr:function(){ //获取上传进度
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',function(e){//监听progress事件
                        var loaded = e.loaded;//已上传
                        var total = e.total;//总大小
                        var percent = Math.floor(100*loaded/total);//百分比
                        processNum.text(percent+"%");//数显进度
						
						// 可以根据自身调整进度条的倍数, 比如你的进度条宽度为 600px, 这里就是 var width_percent = percent * 6
                        var width_percent = percent;
                        processBar.css("width",width_percent+"px");//图显进度}, false);
                    })
                    return myXhr;
                }
            },
            success: function (arr) {
                if (arr.code == 1000) {

                    // 视频路径
                    $(".video_src").attr('src', arr.video_url);

                    alertTips(true, arr.msg);
                } else {
                    alertTips(false, arr.msg);
                }
            },
            error: function(arr){
                processBar.css("width",0);
                processNum.text("");//数显进度
                alertTips(false, '请上传 MP4、MPEG、3GP、AVI 格式且小于 50M 的视频');
                return false;
            }
        })
    }
}

---

二、 PHP 上传大视频

---

2.1 修改 php.ini

根据自身调整数值大小 !

# 1. 通过表单 post 提交给 PHP 所能接收的最大值
post_max_size = 100M

# 2. 允许上传文件大小的最大值
upload_max_filesize = 100M 

# 3. 是否允许通过 http 上传文件 
file_uploads = On

# 4. PHP 页面运行的最大时间(秒)
max_execution_time = 120

# 5. PHP 页面接收数据最大时间(秒)
max_input_time = 120
 
# 6. PHP 页面所占用的最大内存
memory_limit = 128M

---

2.2 修改 nginx.conf

如果修改，记得重启 nginx 哦 !

# 默认 50M
client_max_body_size 100m;

---

2.3 PHP 上传

// 允许上传的文件格式
$ext_video = array('mp4', 'avi', '3gp', 'mpeg');

// 允许上传的文件大小
$min_size = 100; // 100k
$max_size = 1024 * 100; // 100兆

// 检查视频,文件,大小,格式
$check_response = check_file_upload('file', $ext_video, $ext_video, $min_size, $max_size, $min_size, $max_size);

if($check_response['code'] != 1000){
    $return['msg'] = $check_response['desc'];
    exit(json_encode($return));
}

// 上传
$upload_response = upload_video('file');
if($upload_response){
    $return['code']= 1000;
    $return['msg']='上传成功！';
    $return['video_url'] = $url['video_url'];
}
exit(json_encode($return));

---

/**
 * 验证上传文件的大小、格式
 * @param string   $file            文件标签
 * @param array    $ext_img         图片格式要求
 * @param array    $ext_qt          文件格式要求
 * @param int      $small_img_size  最小图片大小
 * @param int      $size_img        最大图片大小
 * @param int      $small_file_size 最小文件大小
 * @param int      $size_file       最大文件大小
 * @return mixed  返回值
 */
function check_file_upload($file,$ext_img,$ext_qt,$small_img_size=1, $size_img=10240, $small_file_size=1, $size_file=12000)
{
    
    $return['code'] = 1000;
    // 原文件名
    $file_name = $_FILES[$file]['name'];
    // 文件大小
    $file_size = $_FILES[$file]['size'];
    
    // 检查文件名
    if (!$file_name) {
        $return['code'] = 1001;
        $return['desc'] = '请选择文件';
    }
    // 获得文件扩展名
    $temp_arr = explode(".", $file_name);
    $file_ext = array_pop($temp_arr);
    $file_ext = trim($file_ext);
    $file_ext = strtolower($file_ext);
    // 检查扩展名
    if (in_array($file_ext, $ext_img) === false && in_array($file_ext, $ext_qt) === false) {
        $return['code'] = 1001;
        $return['desc'] = '上传文件扩展名是不允许的扩展名';
    }
    if(in_array($file_ext, $ext_img)){
        $return['file_type'] = 1; //图片
        // 文件最小
        $small_size = 1024 * $small_img_size;
        // 最大文件大小
        $max_size = 1024 * $size_img;
    }else{
        // 文件最小
        $small_size = 1024 * $small_file_size;
        // 最大文件大小
        $max_size = 1024 * $size_file;
        $return['file_type'] = 2; //其他
    }
    // 检查文件大小
    if ($file_size > $max_size) {
        $return['code'] = 1001;
        $return['desc'] = '上传文件大小超过限制';
    }
    if ($file_size < $small_size) {
        $return['code'] = 1001;
        $return['desc'] = '上传文件大小不符合';
    }
    $return['file_name'] = $file_name;
    return $return;
}


/**
 * 上传视频
 * @param  $filesTag
 * @return array
 */
function upload_video($filesTag)
{
    
    // 原文件名
    $file_name = $_FILES[$filesTag]['name'];
    // 服务器上临时文件名
    $tmp_name = $_FILES[$filesTag]['tmp_name'];
    
    // 检查文件名
    if (!$file_name) {
        $return['code']= 1000;
        $return['msg']='请选择文件！';
        exit(json_encode($return));
    }

    // 检查是否已上传
    if (@is_uploaded_file($tmp_name) === false) {
        $return['code']= 1000;
        $return['msg']='临时文件可能不是上传文件！';
        exit(json_encode($return));
    }

    // 获得文件扩展名
    $temp_arr = explode(".", $file_name);
    $file_ext = array_pop($temp_arr);
    $file_ext = trim($file_ext);
    $file_ext = strtolower($file_ext);
    
    // 新文件名
    $new_file_name = date("His") . '_' . rand(10000, 99999) . '.' . $file_ext;
    
    // 创建文件夹
    $ymd = date("Ym/d");
    
    // 文件保存目录路径
    $path = "/upload/video/" . $ymd . "/";
    $save_path = UPLOAD_PATH . $path;
    if (!file_exists($save_path)) {
        mkdir($save_path, 0755, true);
    }

    // 移动文件
    $file_path = $save_path . $new_file_name;
    if (move_uploaded_file($tmp_name, $file_path) === false) {
        $return['code']= 1001;
        $return['msg']='上传文件失败！';
        exit(json_encode($return));
    }
    chmod($file_path, 0644);
    
    // 视频保存至数据库的路径
    $return_url['video_url'] = $path . $new_file_name;
    
    return $return_url;
}