jQuery jUploader是一個基于jQuery的文件上傳插件,它的使用非常簡單,只需要引入相關js和css文件即可開始使用。它支持大文件上傳、斷點續傳、拖拽上傳等功能,而且還可以自定義上傳進度條樣式。
$(function() {
$('#juploader').jUploader({
url: 'upload.php', // 上傳地址
fileSize: 1024 * 10, // 限制文件大小為10M
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // 允許上傳的文件類型
dragAndDrop: true, // 開啟拖拽上傳功能
onUploadProgress: function(percent) {
$('#progress').width(percent + '%');
},
onSubmit: function(file) {
$('#message').html('上傳中...');
},
onComplete: function(file, response) {
$('#message').html(response);
},
onError: function(error) {
$('#message').html(error);
}
});
});
在上面的代碼中,我們首先通過jQuery選擇器選中一個id為"juploader"的DOM節點,并調用它的jUploader方法。該方法的參數接收一個對象,包含了所有的上傳配置信息。例如,我們設定上傳文件的限制大小為10M,允許上傳的文件類型為jpg、jpeg、png、gif等。
在上傳過程中,我們可以通過'onUploadProgress'事件獲取上傳進度百分比,并將其顯示在一個進度條中。上傳成功或失敗后,我們也可以通過'onComplete'和'onError'事件來處理上傳結果并給出相應的提示信息。
最后,我們需要注意的是,jQuery jUploader插件并不支持跨域上傳,因此如果需要上傳到其他域名的服務器,我們需要借助CORS或JSONP等技術來實現。