一、PHP + ajax 實(shí)現(xiàn)上傳進(jìn)度條

---

1.1 CSS 樣式

根據(jù)自身調(diào)整哦！

.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 代碼

// 進(jìn)度條 var processBar = $(".processBar");// 進(jìn)度數(shù) var processNum = $(".processNum");// 默認(rèn)進(jìn)度條寬度為0 processBar.css("width",0);// 點(diǎn)擊上傳視頻按鈕 $(".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參數(shù)進(jìn)行序列化處理 這里必須falsecontentType: false, // 不設(shè)置 http 頭xhr:function(){ //獲取上傳進(jìn)度myXhr = $.ajaxSettings.xhr();if(myXhr.upload){myXhr.upload.addEventListener('progress',function(e){//監(jiān)聽progress事件var loaded = e.loaded;//已上傳var total = e.total;//總大小var percent = Math.floor(100*loaded/total);//百分比processNum.text(percent+"%");//數(shù)顯進(jìn)度// 可以根據(jù)自身調(diào)整進(jìn)度條的倍數(shù), 比如你的進(jìn)度條寬度為 600px, 這里就是 var width_percent = percent * 6var width_percent = percent;processBar.css("width",width_percent+"px");//圖顯進(jìn)度}, 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("");//數(shù)顯進(jìn)度alertTips(false, '請上傳 MP4、MPEG、3GP、AVI 格式且小于 50M 的視頻');return false;}})} }

---

二、 PHP 上傳大視頻

---

2.1 修改 php.ini

根據(jù)自身調(diào)整數(shù)值大小 !

# 1. 通過表單 post 提交給 PHP 所能接收的最大值 post_max_size = 100M# 2. 允許上傳文件大小的最大值 upload_max_filesize = 100M # 3. 是否允許通過 http 上傳文件 file_uploads = On# 4. PHP 頁面運(yùn)行的最大時(shí)間(秒) max_execution_time = 120# 5. PHP 頁面接收數(shù)據(jù)最大時(shí)間(秒) max_input_time = 120# 6. PHP 頁面所占用的最大內(nèi)存 memory_limit = 128M

---

2.2 修改 nginx.conf

如果修改，記得重啟 nginx 哦 !

# 默認(rèn) 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));

---

/*** 驗(yàn)證上傳文件的大小、格式* @param string $file 文件標(biāo)簽* @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'] = '請選擇文件';}// 獲得文件擴(kuò)展名$temp_arr = explode(".", $file_name);$file_ext = array_pop($temp_arr);$file_ext = trim($file_ext);$file_ext = strtolower($file_ext);// 檢查擴(kuò)展名if (in_array($file_ext, $ext_img) === false && in_array($file_ext, $ext_qt) === false) {$return['code'] = 1001;$return['desc'] = '上傳文件擴(kuò)展名是不允許的擴(kuò)展名';}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'];// 服務(wù)器上臨時(shí)文件名$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']='臨時(shí)文件可能不是上傳文件！';exit(json_encode($return));}// 獲得文件擴(kuò)展名$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;// 創(chuàng)建文件夾$ymd = date("Ym/d");// 文件保存目錄路徑$path = "/upload/video/" . $ymd . "/";$save_path = UPLOAD_PATH . $path;if (!file_exists($save_path)) {mkdir($save_path, 0755, true);}// 移動(dòng)文件$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);// 視頻保存至數(shù)據(jù)庫的路徑$return_url['video_url'] = $path . $new_file_name;return $return_url; }

總結(jié)

以上是生活随笔為你收集整理的PHP + ajax 实现上传进度条、PHP 上传大视频的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。