AjaxFileUpload.js 是一個用于處理文件上傳的 JavaScript 庫,它可以通過 AJAX 實現無刷新提交。要實現文件類型驗證,你可以在客戶端和服務器端都進行驗證。這里以 AjaxFileUpload.js 為例,介紹如何在客戶端實現文件類型驗證。
<script src="ajaxfileupload.js"></script>
<input type="file" id="fileUpload" />
$(document).ready(function () {
$('#fileUpload').ajaxFileUpload({
// 服務器端接收文件的 URL
url: 'your_server_url',
// 文件類型驗證的正則表達式
secureuri: false,
fileElementId: 'fileUpload',
dataType: 'json',
success: function (data, status) {
// 文件上傳成功后的回調函數
console.log('File uploaded successfully:', data);
},
error: function (data, status, e) {
// 文件上傳失敗后的回調函數
if (typeof (data.error) != 'undefined') {
console.log('File upload error:', data.error);
} else {
console.log('File upload error:', e);
}
},
// 在上傳文件之前進行的驗證
beforeSend: function () {
var fileType = $('#fileUpload').attr('accept');
if (!fileType) {
alert('請選擇正確的文件類型');
return false;
}
var regex = new RegExp(fileType);
if (!regex.test(this.value.split('\\').pop())) {
alert('請選擇正確的文件類型');
return false;
}
},
});
});
在這個示例中,我們在 beforeSend
回調函數中進行了文件類型驗證。我們首先獲取文件上傳控件接受的文件類型(通過 accept
屬性),然后使用正則表達式驗證用戶選擇的文件是否滿足要求。如果不滿足要求,將彈出提示框并阻止文件上傳。
注意:這個示例僅用于演示目的,實際項目中你可能需要根據需求進行調整。另外,服務器端也需要進行文件類型驗證,以防止惡意用戶上傳非法文件。