防止 JavaScript 中表单提交的问题

Question

标题：在 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();
});

上传文件或图像时防止表单提交

Answer 1

由于如果出现错误，您的表单将在第二个代码中提交，因此我将合并提交事件并在顶部有一个 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);
  }
});