ThinkPHP+JQuery實現檔案的非同步上傳

jQuery ThinkPHP · 發表 2019-02-08 12:38:29

摘要：前端程式碼 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ThinkPHP+JQuery...

前端程式碼

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ThinkPHP+JQuery實現檔案的非同步上傳</title>
</head>
<body>

<form id="ajax-upload-demo" enctype="multipart/form-data">
<label>選擇檔案：</label>
<input type="file" name="image"><br><br>
<a href="javascript:uploadFile();">上傳</a>
</form>
<br><p id="tips"></p>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>

var isUploading = false;

// 上傳檔案
function uploadFile(){
var form = document.getElementById('ajax-upload-demo');
if(isUploading) {
alert('檔案正在上傳...');
return false;
}
$.ajax({
url: '/index/index/uploadApi',
type: 'POST',
cache: false,
data: new FormData(form),
processData: false,
contentType: false,
dataType: 'json',
beforeSend: function () {
isUploading = true;
},
success: function (json) {
var arr = JSON.parse(json);
if(arr.errcode == 10000){
// 上傳成功
alert('上傳成功');
var url = arr.data.url;
var tips = "<a href='" + url + "' target='_blank'>點選檢視</a>";
$("#tips").empty().append(tips);

}else{
// 上傳失敗
alert('上傳失敗');
}
isUploading = false;
}
});
}
</script>
</body>
</html>

效果圖：

PHP程式碼

<?php
namespace app\index\controller;

use think\Controller;

class Index extends Controller
{
// 上傳表單頁面
public function index()
{
return $this->fetch();
}

// 上傳檔案介面
public function uploadApi(){
// 獲取檔案
$file = request()->file('image');
if($file){
// 校驗陣列
$validateArr = [ 'ext' => 'jpg,jpeg,gif,png,bmp' ];
// 檔案的本地儲存路徑
$path = ROOT_PATH . 'public' . DS . 'upload';
// 校驗並移動
$info = $file->validate($validateArr)->move($path);
// 檢查移動結果
if($info){
// 上傳成功

// 輸出 jpg
#echo $info->getExtension();

// 輸出 20160820/42a79759f284b767dfcb2a0197904287.jpg
#echo $info->getSaveName();

// 輸出 42a79759f284b767dfcb2a0197904287.jpg
#echo $info->getFilename();

// 檔案的原檔名
$sourceInfo = $info->getInfo();
$sourceName = $sourceInfo['name'];

// 拼裝url
$url = '/upload/'.$info->getSaveName();
$url = str_replace('\\', '/', $url); // Windows下替換路徑分隔符

// other some operations ...

// 返回json，告知客戶端上傳結果
$json = json_encode([
'errcode'=> '10000',
'errmsg'=> 'Upload success',
'data'=> [ 'url' => $url ]
]);
}else{
// 上傳失敗，返回json，告知客戶端
$json = json_encode([
'errcode'=> '20002',
'errmsg'=> 'Upload failed',
]);
}
}else{
// 未上傳檔案
$json = json_encode([
'errcode'=> '20001',
'errmsg'=> 'File not uploaded',
]);
}
return $json;
}
}

上傳測試

1. 上傳一張圖片

2. 上傳成功

3. 點選檢視

4. 檢視圖片

5. 檢視上傳目錄

可能出現的錯誤

1. PHP的上傳限制

解決方法

開啟PHP的配置檔案 php.ini

查詢 max_execution_time ，修改其值為 60 或更大
查詢 post_max_zise ，修改其值為 128M 或更大
查詢 upload_max_filesize ，修改其值為 128M 或更大

原因

max_execution_time
post_max_size
upload_max_filesize

本文連結：https://www.cnblogs.com/connect/p/thinkphp-ajax-upload.html