AjaxFileUpload.js 是一個(gè)用于處理文件上傳的 JavaScript 庫,它可以通過 AJAX 實(shí)現(xiàn)無刷新提交。要實(shí)現(xiàn)文件預(yù)覽功能,你可以在客戶端處理文件上傳的同時(shí),將文件讀取為 Data URL(base64 編碼的字符串),然后將 Data URL 顯示為預(yù)覽圖像。以下是一個(gè)簡單的示例:
<script src="ajaxfileupload.js"></script>
<img>
標(biāo)簽:<img id="file-preview" src="#" alt="File Preview" style="display:none;" />
$.ajaxFileUpload({
url: 'your-upload-url', // 你的文件上傳處理 URL
secureuri: false,
fileElementId: 'file-input', // 你的文件輸入元素的 ID
dataType: 'json',
success: function(data, status) {
if (typeof (data.error) != 'undefined') {
alert(data.error);
} else {
// 將文件讀取為 Data URL
var file = data.files[0];
var reader = new FileReader();
reader.onloadend = function() {
// 設(shè)置預(yù)覽圖像的 src 屬性
$('#file-preview').attr('src', reader.result);
// 顯示預(yù)覽圖像
$('#file-preview').show();
};
reader.readAsDataURL(file);
}
},
error: function(data, status, e) {
alert(e);
}
});
<input type="file" id="file-input" name="file" />
現(xiàn)在,當(dāng)用戶選擇一個(gè)文件并點(diǎn)擊上傳按鈕時(shí),AjaxFileUpload.js 會(huì)處理文件上傳,并將文件讀取為 Data URL。上傳成功后,預(yù)覽圖像將顯示在頁面上。