一、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;
}