PHP EasyUI Filebox介紹及使用方法

PHP EasyUI Filebox是一款基于jQuery EasyUI的文件上傳插件，主要用于在網站中實現文件上傳功能。它支持多文件上傳，可以顯示上傳進度條，使用簡單方便。

使用方法：

首先，我們需要引入jQuery和EasyUI的庫文件，然后再引入php-easyui-filebox.js文件。

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.5/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.5/themes/icon.css"></link>
<script type="text/javascript" src="jquery-easyui-1.8.5/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="php-easyui-filebox.js"></script>

然后，我們需要在HTML中添加一個div來實現文件上傳功能。可以指定一些屬性來控制文件上傳的一些參數。

<div id="filebox" class="easyui-filebox" name="file[]" 
data-options="prompt:'選擇文件', multiple:true, buttonText:'瀏覽', 
width:'200px', height:'28px', onChange:submitFile">
</div>

這樣，我們就可以實現一個簡單的文件上傳功能。用戶可以通過點擊“瀏覽”按鈕，從本地選擇文件上傳。當用戶選擇文件后，onChange事件被觸發(fā)，并調用submitFile方法來上傳文件。

function submitFile() {
// 獲取文件上傳插件的值（File對象）
var fileboxValue = $('#filebox').filebox('getFiles');
// 創(chuàng)建FormData對象，用于發(fā)送文件數據
var formData = new FormData();
for (var i = 0; i< fileboxValue.length; i++) {
formData.append('file' + i, fileboxValue[i]);
}
// 使用ajax提交文件數據
$.ajax({
url: 'upload_file.php',
type: 'POST',
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr;
},
success: function (data) {
alert('上傳成功！');
},
error: function (xhr, status, error) {
alert('上傳失敗！');
},
data: formData,
cache: false,
contentType: false,
processData: false
});
}

submitFile方法使用FormData對象來創(chuàng)建一個數據對象，將所有選中的文件添加到數據中，然后使用jQuery.ajax方法發(fā)送數據到服務器。在這個例子中，我們將上傳文件發(fā)送到upload_file.php頁面進行處理。這個過程中，我們還可以使用進度條來顯示上傳進度情況。

function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}   
}

總結

PHP EasyUI Filebox是一款簡單易用的文件上傳插件。它可以幫助我們輕松地實現文件上傳功能，還支持多文件上傳和進度條顯示功能。有了它，網頁開發(fā)變得更加簡單方便。