//index.js
let image = document.getElementsByTagName('img')[0];
let progress = document.getElementById('progress');
let file = document.getElementById('photo');
file.addEventListener('change', function (event) {
let upfile = this.files;
if (upfile.length == 0) {
return;
}
uploadFile(upfile[0]);
readAsDataURL(upfile[0], image);
}, false)//檔案change事件自動上傳檔案
function readAsDataURL(file, image) {//前台預覽
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
image.src = this.result;
}
image.style.display = 'block';
}
function uploadFile(file) {//Ajax發送圖檔
let formData = new FormData();
formData.append('image', file);//注意這裡和後端的multer的array參數相比對, 否則背景讀不到讀片資訊
console.log(formData.get('image'))
Ajax('POST', '/file_upload', formData, progress).then(function (data) {
console.log(`success: ${data}`);
}, function (data) {
console.log(`fail: ${data}`);
})
}
function Ajax(method, url, data, progress = null) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
try {//設定了逾時時間, 防止由于該條件(即readystate等于4)成立, 進入該判斷塊, 下面的status讀取不到, 導緻抛出錯誤
if (xhr.status >= 200 || xhr.status < 300 || xhr.status == 304) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
} catch (error) {
reject(new Error('Time out!'));
}
}
}
if (progress !== null) {//進度條
xhr.upload.onprogress = function (event) {
progress.innerText = `uploaded ${event.loaded} of ${event.total} bytes. percent ${Math.floor(event.loaded / event.total * 100)}%`
}
}
xhr.timeout = 7000;//逾時7秒
xhr.ontimeout = function () {
alert('time out!');
}
method = method.toUpperCase();
if (method == 'GET') {
xhr.open("GET", url);
xhr.send();
} else if (method == 'POST') {
xhr.open("POST", url, true);
//xhr.setRequestHeader('Content-Type', 'multipart/form-data');//這裡不必設定了, 因為前面使用了FormData
xhr.send(data);
} else {
reject(new Error('method error'));
}
})
}