diff --git a/client/client.js b/client/client.js
index 2e9ca3b..0c25d65 100644
--- a/client/client.js
+++ b/client/client.js
@@ -47,11 +47,19 @@ socket.on('offer', (offer, id) => {
pc.setLocalDescription(answer);
socket.emit('answer', answer, clientId, targetId);
});
+ // 修改connectButton
+ connectButton.style.backgroundColor = 'green';
+ connectButton.disabled = true;
+ connectButton.style.cursor = 'not-allowed';
});
// 当接收到对方的answer时，设置为remote description
socket.on('answer', (answer, id) => {
pc.setRemoteDescription(new RTCSessionDescription(answer));
+ // 修改connectButton
+ connectButton.style.backgroundColor = 'green';
+ connectButton.disabled = true;
+ connectButton.style.cursor = 'not-allowed';
});
// 创建data channel，用于发送文件
@@ -66,7 +74,7 @@ sendChannel.onerror = (error) => {
console.error('[data channel] error', error);
};
-document.getElementById('sendButton').addEventListener('click', () => {
+document.getElementById('fileInput').addEventListener('change', () => {
// Get the file
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
@@ -87,18 +95,19 @@ document.getElementById('sendButton').addEventListener('click', () => {
fileReader.addEventListener('error', error => console.error('[error reading file] ', error));
fileReader.addEventListener('abort', event => console.log('[file reading aborted] ', event));
fileReader.addEventListener('load', e => {
- // console.log('[fileRead.onload] ', e);
sendChannel.send(e.target.result);
offset += e.target.result.byteLength;
+ fileProgress.value = offset;
if (offset < file.size) {
readSlice(offset);
}
});
const readSlice = o => {
- // console.log('[readSlice] ', o);
const slice = file.slice(offset, o + chunkSize);
fileReader.readAsArrayBuffer(slice);
};
+ // 计算文件总大小并更新进度条
+ fileProgress.max = file.size;
readSlice(0);
});
@@ -117,6 +126,9 @@ pc.ondatachannel = event => {
fileSize = parseInt(event.data);
}
} else {
+ // 取消 download 隐藏
+ document.getElementById('download').style.display = 'flex';
+
receivedData.push(event.data);
receivedSize += event.data.byteLength;
@@ -125,11 +137,11 @@ pc.ondatachannel = event => {
receivedData = [];
receivedSize = 0;
- const downloadLink = document.createElement('a');
+ const downloadLink = document.getElementById('download');
downloadLink.href = URL.createObjectURL(receivedFile);
downloadLink.download = fileName;
- downloadLink.textContent = 'Click here to download the file';
- document.body.appendChild(downloadLink);
+ const downloadName = document.getElementById('downloadName');
+ downloadName.textContent = fileName;
console.log(`Received file ${fileName} with size ${fileSize}`);
}
diff --git a/client/index.html b/client/index.html
index 0acdbfc..7ff3294 100644
--- a/client/index.html
+++ b/client/index.html
@@ -23,21 +23,27 @@
+
- cloud_upload
+ upload_file
-
Drop a file here
+
拖拽或点击上传文件
+
-
-
-
-
-
-
+
+
+
+
+
diff --git a/client/style.css b/client/style.css
index 1dc71d0..c1776b4 100644
--- a/client/style.css
+++ b/client/style.css
@@ -86,7 +86,7 @@ button:hover {
border: 2px dashed #007bff;
border-radius: 5px;
width: 500px;
- padding: 20px;
+ padding: 60px;
display: flex;
flex-direction: column;
align-items: center;
@@ -94,23 +94,74 @@ button:hover {
gap: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
- display: none;
}
.file #dropzone:hover {
background-color: #f0f0f0;
}
+.file #dropzone #fileInput {
+ display: none;
+}
+
.file #dropzone span {
- font-size: 80px;
+ font-size: 60px;
font-weight: bold;
color: #007bff;
}
-.file #dropzone p {
+.file #dropzone #fileName {
+ margin: 0;
font-size: 30px;
+ line-height: 30px;
font-weight: bold;
color: #007bff;
}
-.file #fileInput {}
\ No newline at end of file
+progress {
+ border: 2px solid #007bff;
+ border-radius: 5px;
+ height: 20px;
+}
+
+progress::-webkit-progress-bar {
+ background-color: transparent;
+}
+
+progress::-webkit-progress-value {
+ background-color: #007bff;
+}
+
+.file .download {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ width: 500px;
+ text-decoration: none;
+}
+
+.file .download #downloadDisplay {
+ flex: 1;
+ height: 60px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.file .download #downloadDisplay progress {
+ width: 100%;
+}
+
+.file .download #downloadDisplay #downloadName {
+ margin: 0;
+ font-size: 20px;
+ line-height: 40px;
+ font-weight: bold;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ color: black;
+}
\ No newline at end of file
diff --git a/client/util.js b/client/util.js
index 1ae9ae7..09e3ecc 100644
--- a/client/util.js
+++ b/client/util.js
@@ -1,48 +1,44 @@
-let dropFrame = document.getElementById('dropzone');
-let fileInput = document.getElementById('fileInput');
-
-dropFrame.addEventListener('dragover', (e) => {
- e.stopPropagation();
- e.preventDefault();
+fileInput.addEventListener('change', function () {
+ if (this.files.length > 0) {
+ fileName.textContent = this.files[0].name;
+ // 改变字体大小
+ fileName.style.fontSize = '20px';
+ } else {
+ fileName.textContent = '拖拽或点击上传文件';
+ }
});
-dropFrame.addEventListener('drop', (e) => {
- e.stopPropagation();
- e.preventDefault();
-
- let items = e.dataTransfer.items;
- let dt = new DataTransfer();
-
- for (const item of items) {
- const entry = item.webkitGetAsEntry();
-
- if (entry.isFile) {
- entry.file((file) => {
- dt.items.add(file);
- })
-
- } else {
- const reader = entry.createReader()
- reader.readEntries((entries) => {
- reHandleFile(entries, dt)
- })
- }
+dropzone.onclick = () => fileInput.click();
+dropzone.ondragover = event => {
+ event.preventDefault();
+ dropzone.style.backgroundColor = 'lightgray';
+};
+dropzone.ondragleave = () => dropzone.style.backgroundColor = 'white';
+dropzone.ondrop = event => {
+ event.preventDefault();
+ fileInput.files = event.dataTransfer.files;
+ dropzone.style.backgroundColor = 'white';
+ var event = new Event('change');
+ fileInput.dispatchEvent(event);
+};
+
+if (targetIdInput.value.length !== 4) {
+ connectButton.style.backgroundColor = 'gray';
+ connectButton.disabled = true;
+ connectButton.style.cursor = 'not-allowed';
+}
+
+// 当targetIdInput的值改变时，去除connectButton的行内样式，并去除disabled属性
+targetIdInput.addEventListener('input', () => {
+ connectButton.removeAttribute('style');
+ connectButton.removeAttribute('disabled');
+ connectButton.style.cursor = 'pointer';
+ if (targetIdInput.value.length !== 4) {
+ connectButton.style.backgroundColor = 'gray';
+ connectButton.disabled = true;
+ connectButton.style.cursor = 'not-allowed';
}
-
- fileInput.files = dt.files;
});
-const reHandleFile = (entries, dt) => {
- for (const entry of entries) {
- if (entry.isFile) {
- entry.file((file) => {
- dt.items.add(file);
- })
- } else {
- const reader = entry.createReader()
- reader.readEntries((entries) => {
- reHandleFile(entries, dt)
- })
- }
- }
-}
\ No newline at end of file
+// download 隐藏
+download.style.display = 'none';
\ No newline at end of file