使用jQuery的Fileupload控件實現文件上傳功能

在Web開發中，很多時候我們需要實現文件上傳功能。Fileupload控件是jQuery插件庫中一款非常優秀、易用的文件上傳插件。它可以方便地通過AJAX上傳文件，同時提供實時進度條和預覽功能。

使用Fileupload控件非常簡單，只需要先引入jQuery和Fileupload插件庫，然后在HTML中加入如下代碼：

<form id="fileupload" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]"/>
<button type="submit">上傳文件</button>
</form>
<div id="preview"></div>

上述代碼中，用form標簽包裹了一個文件選擇框和一個按鈕，當用戶選擇文件并點擊上傳按鈕時，會觸發提交表單事件。并且包括一個空的div標簽用于預覽上傳的文件。

接下來，我們需要在jQuery中添加代碼，處理文件上傳和預覽：

$(document).ready(function() {
$('#fileupload').fileupload({
url: 'upload.php', // 文件上傳地址
dataType: 'json', // 返回數據格式
autoUpload: true, // 是否自動上傳文件
sequentialUploads: true, // 是否順序上傳
maxFileSize: 5000000, // 最大上傳文件大小
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // 允許上傳的文件類型         
done: function (e, data) { // 文件上傳完成回調函數
$.each(data.result.files, function (index, file) {
var path = file.url; // 文件路徑
$('#preview').append('<img src="'+path+'" width="100">'); // 預覽圖片
});
},
progressall: function (e, data) { // 顯示上傳進度條
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}
});
});

此處我們使用了Fileupload提供的fileupload方法來對文件上傳進行配置。其中url指定了上傳文件的后臺處理地址，dataType指定了返回數據的格式，autoUpload和sequentialUploads控制了自動上傳及上傳順序的配置，maxFileSize和acceptFileTypes指定了最大上傳文件大小和允許上傳的文件類型。

在上傳完成后回調函數中，通過遍歷返回的文件信息，獲取文件的路徑并在預覽div中插入一張縮略圖。progressall函數則用于顯示實時上傳進度條。

通過以上步驟，我們就可以通過Fileupload函數庫實現非常方便簡單的文件上傳和預覽功能。