如何通过Ajax将本地拖拽文件上传至服务器？现有代码适配

Got it, let's tackle this file upload issue for your drag-and-drop feature! Here's how you can modify your existing code to handle both web images and local dragged files with your sendFormData() function:

The core trick here is using FormData—this object lets you wrap file data properly for Ajax uploads, which is required for sending local files to your server. Here's how to adjust your function:

function sendFormData(file) {
  // Create a FormData instance to package the file
  const formData = new FormData();
  // Append the file to FormData (use the field name your server expects)
  formData.append('uploaded-image', file);

  // Your existing Ajax logic (adjust endpoint and handlers as needed)
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/your-server-upload-endpoint', true);

  // Optional: Track upload progress
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const progressPercent = Math.round((e.loaded / e.total) * 100);
      console.log(`Upload progress: ${progressPercent}%`);
    }
  });

  xhr.onload = () => {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('Upload successful!', xhr.responseText);
    } else {
      console.error('Upload failed:', xhr.statusText);
    }
  };

  xhr.onerror = () => {
    console.error('Network error during upload');
  };

  // Send the FormData (browser automatically sets the correct Content-Type header)
  xhr.send(formData);
}

You already get the File object from e.dataTransfer.files[0]—now we need to:

1. Generate a preview for the local image
2. Trigger the upload with sendFormData()

Update your ondrop handler and getFile() helper:

dropzone.ondrop = function ondrop(e) {
  e.preventDefault();
  dropzone.classList.remove('dragover');
  
  // Try to get images from this drop event
  const imgData = retrieveImageData(e.dataTransfer);
  if (!imgData) {
    return;
  }

  // Handle preview and upload based on data type
  if (imgData.file) {
    // Local file: create a temporary URL for preview
    res.src = URL.createObjectURL(imgData.file);
    // Trigger the upload
    sendFormData(imgData.file);
    // Clean up the temporary URL after the image loads to free memory
    res.onload = () => {
      URL.revokeObjectURL(res.src);
    };
  } else if (imgData.element) {
    // Web image: keep your existing preview logic
    res.src = imgData.element.src;
    // If you need to upload web images too, uncomment the code below:
    // fetch(imgData.element.src)
    //  .then(res => res.blob())
    //  .then(blob => sendFormData(new File([blob], 'web-image.jpg', { type: blob.type })));
  }
};

// Update the getFile helper to return the File object
function getFile(dataTransfer) {
  const files = dataTransfer.files;
  if (files.length > 0) {
    const file = files[0];
    // Verify it's an image file
    if (file.type.startsWith('image/')) {
      return { file: file }; // Return an object containing the File
    }
  }
  return null;
}

• FormData is non-negotiable: When uploading files via Ajax, wrapping the File in FormData ensures the browser uses the correct multipart/form-data encoding that servers expect for file uploads.
• Temporary object URLs: URL.createObjectURL() lets you display local files in the browser without uploading them first. Always revoke the URL after the image loads to avoid memory leaks.
• Server-side alignment: Make sure your server endpoint is set up to accept the field name you used in formData.append() (in this example, uploaded-image).

内容的提问来源于stack exchange，提问作者Paul Taylor