當前位置：首頁 > 编程语言 > php >内容正文

php

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

發布時間：2024/3/24 php 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

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參數進行序列化處理這里必須falsecontentType: 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 * 6var 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; }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。