JQ上傳是一項(xiàng)非常重要的Web前端技術(shù)，對(duì)于開發(fā)Web應(yīng)用程序的開發(fā)者來說是必備的技能之一。本篇文章將介紹如何使用JQ上傳來上傳文件到PHP服務(wù)器中，并且逐步介紹一些常見的應(yīng)用場(chǎng)景。

首先我們需要下載最新版的JQ上傳插件，并且在頁面中引入相關(guān)文件，可以使用CDN，也可以下載后進(jìn)行引入。如下所示：

<link rel="stylesheet" >
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/plupload/2.1.9/moxie.min.js"></script>
<script src="http://cdn.bootcss.com/plupload/2.1.9/plupload.min.js"></script>
<script src="http://cdn.bootcss.com/qiniu-js/2.1.4/qiniu.min.js"></script>

然后我們需要編寫上傳文件的HTML代碼：

<!--用于顯示上傳按鈕的div-->
<div id="container">
<a class="btn" href="javascript:;">
<span>選擇文件</span>
<input id="pickfiles" type="file" name="file" multiple>
</a>
</div>
<!--上傳文件進(jìn)度條-->
<div id="progressbar"></div>

接下來我們需要編輯JS代碼，從前端獲取上傳文件的信息，并上傳到PHP服務(wù)器中。如下所示：

//生成Uploader對(duì)象
var uploader = Qiniu.uploader({
runtimes: 'html5, flash, html4',
//上傳文件的數(shù)量
browse_button: 'pickfiles',
//用于顯示上傳按鈕的div的id
container: 'container',
//上傳的文件類型
filters: {
mime_types: [
{title: "Image files", extensions: "jpg,gif,png"}
]
},
//自定義文件名，上傳到PHP服務(wù)器時(shí)使用
save_key: true,
chunk_size: '4mb',
unique_names: true,
//上傳到的PHP服務(wù)器地址
domain: "http://xxxx.com",
//上傳到PHP服務(wù)器的憑證
uptoken_url: "/uptoken.php",
//上傳成功后的回調(diào)函數(shù)
init: {
'FileUploaded': function (up, file, info) {
var domain = up.getOption('domain');
var res = JSON.parse(info.response);
var sourceLink = domain + "/" + res.key;
},
//上傳文件的進(jìn)度條顯示
'UploadProgress': function (up, file) {
var progressbar = document.getElementById('progressbar');
progressbar.style.width = file.percent + '%';
},
'Error': function (up, err, errTip) {
console.log(err);
}
}
});

最后我們需要在PHP服務(wù)器上編寫相關(guān)邏輯代碼，處理從前端傳來的數(shù)據(jù)并且進(jìn)行文件的保存和下載。如下所示:

<?php
require_once("vendor/autoload.php");
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
//AK，SK以及上傳的空間名稱
$accessKey = 'Access_Key';
$secretKey = 'Secret_Key';
$auth = new Auth($accessKey, $secretKey);
$bucket = 'Bucket_Name';
$upMgr = new UploadManager();
//上傳時(shí)使用的文件名
$key = $_POST["name"];
//獲取上傳憑證
$token = $auth->uploadToken($bucket);
//進(jìn)行文件上傳
list($ret, $err) = $upMgr->putFile($token, $key, $_FILES["file"]["tmp_name"]);
echo '{"key":"' . $ret["key"] . '","hash":"' . $ret["hash"] . '"}';
?>

JQ上傳是非常時(shí)候的Web前端技術(shù)，可以應(yīng)用于各種不同的場(chǎng)景，比如圖片、文件等等。并且，可以應(yīng)用到Web應(yīng)用程序的開發(fā)中，讓您的應(yīng)用更加專業(yè)和易用。