如何用Python Selenium实现文件拖拽上传？问题代码求助

Hey there! Let's break down why your current drag-and-drop upload code isn't working and walk through the correct approaches to get this sorted.

First, the issues with your existing code: #

• driver.find_elements_by_id("file_upload") returns a list of elements, not a single WebElement. The drag_and_drop method expects a single element, so you should use find_element_by_id (singular) instead—assuming that element actually exists on the page.
• More importantly: Selenium's built-in drag_and_drop from ActionChains only works for dragging elements within the browser page. It can't directly drag local files from your computer into the browser's drop zone. That's the core problem here.

Solution 1: Use the hidden file input (most reliable) #

Nearly all drag-and-drop upload components are built on top of a hidden <input type="file"> element under the hood. Even if it doesn't have an id or name, you can locate it using other attributes. Here's how:

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("your_target_website_url")

# Locate the hidden file input (using XPath to find elements with type="file")
file_input = driver.find_element(By.XPATH, "//input[@type='file']")

# If the element is hidden, force it to be visible with JavaScript (some sites hide it)
driver.execute_script("arguments[0].style.display = 'block';", file_input)

# Send the file path directly to the input (no drag needed!)
file_input.send_keys(r"C:\Users\Desktop\Robert\Construct_ImminentCollision-C.jpg")

Solution 2: Simulate a file drop with JavaScript #

If you specifically want to replicate the drag-and-drop user experience, you'll need to use JavaScript to construct the necessary drag-and-drop events (since Selenium can't handle local file drags natively). Here's a working script:

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("your_target_website_url")

# Locate your drop zone element
drop_zone = driver.find_element(By.ID, "add-new-pano")
file_path = r"C:\Users\Desktop\Robert\Construct_ImminentCollision-C.jpg"

# JavaScript to simulate the full drag-and-drop flow
simulate_drop_script = """
function simulateFileDrop(target, filePath) {
    // Create a mock file object (matches the structure of a local file)
    const file = new File([''], filePath);
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);

    // Trigger required drag events in order
    const dragEnter = new DragEvent('dragenter', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dataTransfer
    });
    target.dispatchEvent(dragEnter);

    const dragOver = new DragEvent('dragover', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dataTransfer
    });
    target.dispatchEvent(dragOver);

    // Finally, trigger the drop event
    const dropEvent = new DragEvent('drop', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dataTransfer
    });
    target.dispatchEvent(dropEvent);
}

// Run the function with our target element and file path
simulateFileDrop(arguments[0], arguments[1]);
"""

# Execute the script
driver.execute_script(simulate_drop_script, drop_zone, file_path)

Quick notes: #

• Always use raw strings (r"path") for Windows file paths to avoid escape character issues.
• Some sites may require additional events (like dragleave) or have specific validation—if the script above doesn't work, check the site's event listeners using browser dev tools.

内容的提问来源于stack exchange，提问作者Robert Piotrowski