在網絡工程中,文件上傳是常見的功能需求,但直接上傳未加密的文件存在安全風險。JavaScript配合現代Web API能夠實現客戶端文件加密后再上傳,有效保護用戶數據隱私。本文將詳細介紹如何利用JavaScript在網頁中實現文件加密上傳的技術方案。
使用HTML5的File API獲取用戶選擇的文件:`javascript
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
// 文件處理邏輯
});`
function readFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
}
async function encryptFile(fileBuffer, password) {
// 生成密鑰
const key = await window.crypto.subtle.importKey(
'raw',
new TextEncoder().encode(password),
{ name: 'AES-GCM' },
false,
['encrypt']
);
// 生成初始化向量
const iv = window.crypto.getRandomValues(new Uint8Array(12));
// 加密文件
const encrypted = await window.crypto.subtle.encrypt(
{
name: 'AES-GCM',
iv: iv
},
key,
fileBuffer
);
return { encrypted, iv };
}
async function uploadEncryptedFile(encryptedData, originalFileName) {
const formData = new FormData();
// 創建加密文件Blob
const encryptedBlob = new Blob([encryptedData.encrypted]);
// 添加密文和初始化向量
formData.append('file', encryptedBlob, originalFileName + '.enc');
formData.append('iv', new Blob([encryptedData.iv]));
// 上傳到服務器
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
return response.json();
}
document.getElementById('uploadBtn').addEventListener('click', async function() {
const file = document.getElementById('fileInput').files[0];
const password = document.getElementById('password').value;
if (!file || !password) {
alert('請選擇文件并輸入密碼');
return;
}
try {
// 讀取文件
const fileBuffer = await readFile(file);
// 加密文件
const encryptedData = await encryptFile(fileBuffer, password);
// 上傳加密文件
const result = await uploadEncryptedFile(encryptedData, file.name);
if (result.success) {
alert('文件加密上傳成功!');
} else {
alert('上傳失敗:' + result.message);
}
} catch (error) {
console.error('加密上傳失敗:', error);
alert('加密上傳失敗,請重試');
}
});
服務器需要接收加密文件和初始化向量,并妥善存儲。解密過程可以在需要時在服務器端或客戶端進行:
// 服務器端Node.js示例
app.post('/upload', uploadMiddleware, (req, res) => {
const encryptedFile = req.files.file[0];
const iv = req.files.iv[0].buffer;
// 存儲加密文件和iv
// 實際項目中應使用數據庫存儲相關信息
res.json({ success: true, fileId: generatedFileId });
});
利用JavaScript實現文件加密上傳是保護用戶隱私數據的重要手段。通過合理使用Web Crypto API和File API,開發者可以構建安全可靠的文件上傳系統。在實際網絡工程項目中,應根據具體安全需求和性能要求選擇合適的加密方案,并配合服務器端的安全措施,構建完整的文件安全傳輸體系。
如若轉載,請注明出處:http://www.o0yk.cn/product/25.html
更新時間:2026-01-07 17:12:54