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