效果如下:
php代碼:
public function upload(){
$file = $this->my_get_file($_FILES);
if($file){
$this ->ajaxReturn(['status'=>200,'msg'=>"成功",'data'=>$file]);
}
$this ->ajaxReturn(['status'=>300,'msg'=>"失敗"]);
}
public function my_get_file($arr_files)
{
// 文件存儲目錄
$dir = "/public/video/" . date("Y") . "/" . date("Ym") . "/";
// 遞歸檢測是否存在該目錄 如果沒有則新建
!file_exists("." . $dir) && mkdir("." . $dir, 0777, true);
// 循環數據獲取到文件路徑
$arrdata = [];
foreach ($arr_files as $key => $val) {
//圖片上傳不能超過30M
if ($val['size'] > 80 * 1024 * 1024) {
return ['status' => false, 'msg' => "文件過大"];
}
//給文件重命名,儘量不要起中文名字,如下以時間戳+隨機數重命名
$filename = $dir . date("YmdHis") . rand(100000, 999999);
//獲取文件的後綴,pathinfo()會以數組的形式返回一個文件的路徑信息,其中extension元素則是文件的後綴名
$ext = pathinfo($val['name'])['extension'];
//最終文件名爲
$filename = $filename . '.' . $ext;
//設置文件上傳到服務器後存放的位置,move_uploaded_file()會將文件移動到新位置,第一個參數是要移動的文件,第二個參數是移動到哪裏。我在這裏是放到和本php文件同一目錄下,注意需要將新的文件名連接進去。
if (move_uploaded_file($val['tmp_name'], '.' . $filename)) {
$arrdata[$key] = $filename;
}
}
return $arrdata;
}
html代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上傳視頻</title>
</head>
<body>
<dl class="row">
<dt class="tit">
<label>視頻上傳</label>
</dt>
<!--{$goodsInfo.original_img}-->
<dd class="opt">
<div class="input-file-show">
<div>
<input type="file" name="FileUpload" id="FileUpload">
<a class="layui-btn layui-btn-mini" id="btn_uploadimg">上傳視頻</a>
</div>
</div>
</dd>
</dl>
<script src="__PUBLIC__/js/jquery-1.9.1.min.js"></script>
<script>
// ajax上傳視頻返回路徑
$("#btn_uploadimg").click(function(){
var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對象
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("請選擇圖片");
return;
}
var formFile = new FormData();
formFile.append("action", "UploadVMKImagePath");
formFile.append("file", fileObj); //加入文件對象
var data = formFile;
$.ajax({
url: "__CONTROLLER__/upload",
data: data,
type: "Post",
dataType: "json",
cache: false,//上傳文件無需緩存
processData: false,//用於對data參數進行序列化處理 這裏必須false
contentType: false, //必須
success: function (result) {
console.log(result);
alert(result.msg);
$("#video").val(result.data.file);
}
})
});
</script>
</body>
</html>