标题:在 JavaScript 中上传文件时阻止表单提交的问题
我遇到了阻止 JavaScript 代码中表单提交的问题。我有一个表单,允许用户输入消息并可选择上传文件或图像。目的是防止上传文件时提交表单,以避免重新加载页面并丢失聊天记录。
以下是相关的 JavaScript 代码:
const form = document.getElementById('send-container');
// Event listener for form submission
form.addEventListener('submit', (e) => {
e.preventDefault();
// Check if a message is being sent
if (messageInput.value.trim() !== '') {
const message = messageInput.value;
append(`You: ${message}`, 'right');
socket.emit('send', message);
messageInput.value = '';
}
});
// Event listener for form submission
form.addEventListener('submit', (e) => {
// Check if a file is being uploaded
if (myfileInput.files.length > 0) {
const file = myfileInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const base64Data = event.target.result;
socket.emit('image', { name: file.name, data: base64Data });
append(`You: ${file.name}`, 'right');
myfileInput.value = '';
};
reader.onerror = function(event) {
console.error('Error reading file:', event.target.error);
};
reader.readAsDataURL(file);
}
e.preventDefault();
});
上传文件或图像时防止表单提交
由于如果出现错误,您的表单将在第二个代码中提交,因此我将合并提交事件并在顶部有一个 PreventDefault
我也不希望允许这样做:
myfileInput.value = '';
,这可能是你的问题
// Event listener for form submission
form.addEventListener('submit', (e) => {
e.preventDefault();
// Check if a message is being sent
if (messageInput.value.trim() !== '') {
const message = messageInput.value;
append(`You: ${message}`, 'right');
socket.emit('send', message);
messageInput.value = '';
}
// Check if a file is being uploaded
if (myfileInput.files.length > 0) {
const file = myfileInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const base64Data = event.target.result;
socket.emit('image', {
name: file.name,
data: base64Data
});
append(`You: ${file.name}`, 'right');
myfileInput.value = ''; // I would not expect this to work
};
reader.onerror = function(event) {
console.error('Error reading file:', event.target.error);
};
reader.readAsDataURL(file);
}
});