图片拼接工具Demo：能否将<img>标签图片拖拽至HTML表单file input？

我正在开发一款图片拼接工具的演示页面，希望用户无需自行上传图片，直接使用网页中展示的图片。需要实现让用户将<img>标签中的图片拖拽至表单的input控件内的功能。

以下是我目前编写的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Stitcher</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="static/js/index.js" defer></script>
</head>
<body>
    <div class="content">
        <nav>
            <h1>Image Stitcher</h1>
            <a class="link" href="{{url_for('home')}}">home</a>
            <a class="link right" href="{{url_for('about')}}">about</a>
        </nav>
        <br /><br />
        <div class="row">
            <div class="form-area">
                <form action="http://127.0.0.1:5000" method="POST" enctype="multipart/form-data">
                    <label for="left_image">Upload the left image:</label>
                    <input type="file" id="left_image" name="left_image" accept="image/png, image/jpeg" />
                    <br />
                    <label for="right_image">Upload the right image:</label>
                    <input type="file" id="right_image" name="right_image" accept="image/png, image/jpeg" />
                    <br />
                    <button class="submit" type="submit">Start Stitching</button>
                </form>
            </div>
            <div class="image-row">
                <div class="demo-image">
                    <p> drag me to the <strong>left image</strong></p>
                    <img id="image-to-drag" src="/static/left_art.png" alt="Left Image">
                </div>
                <div class="demo-image">
                    <p> drag me to the <strong>right image</strong></p>
                    <img src="/static/right_art.png" alt="Right Image">
                </div>
            </div>
        </div>
    </div>
    <br /><br />
</body>
</html>

我也接受通过UI模拟该行为、上传图片base64编码的解决方案。

我尝试使用拖拽事件，但DragEvent.dataTransfer.files始终为空，相关代码如下：

// from index.js
function drag(event) {
    console.log('DRAG')
    console.log(event)
}
// and change the img elements to this
<img ondragstart="drag(event)" draggable="true" src="/static/right_art.png" alt="Right Image">

现寻求可行的实现方法。

直接拖拽<img>到文件输入框无法直接生成File对象，因为默认拖拽的是图片URL而非文件数据。这里提供两种实用方案：

方案一：拖拽转文件填充输入框 #

1. 给演示图片添加拖拽事件，将图片资源转换为File对象后存入拖拽数据：

// index.js
document.querySelectorAll('.demo-image img').forEach(img => {
    img.draggable = true;
    img.addEventListener('dragstart', async (e) => {
        e.preventDefault();
        // 从图片src提取文件名
        const fileName = img.src.split('/').pop();
        // 获取图片Blob资源
        const response = await fetch(img.src);
        const blob = await response.blob();
        // 创建File对象
        const file = new File([blob], fileName, { type: blob.type });
        // 存入拖拽数据
        e.dataTransfer.clearData();
        e.dataTransfer.items.add(file);
    });
});

// 给文件输入框绑定拖拽接收事件
document.querySelectorAll('input[type="file"]').forEach(input => {
    input.addEventListener('dragover', (e) => {
        e.preventDefault();
        input.classList.add('drag-over');
    });
    input.addEventListener('dragleave', () => {
        input.classList.remove('drag-over');
    });
    input.addEventListener('drop', (e) => {
        e.preventDefault();
        input.classList.remove('drag-over');
        // 将拖拽的文件赋值给输入框
        if (e.dataTransfer.files.length > 0) {
            input.files = e.dataTransfer.files;
        }
    });
});

2. 可选：添加CSS增强拖拽视觉反馈

/* style.css */
input[type="file"].drag-over {
    border: 2px dashed #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
}

方案二：点击图片直接填充输入框（无需拖拽） #

如果拖拽不是硬性要求，这种方式更简单直观：

// index.js
// 绑定左侧图片点击事件
document.querySelector('#image-to-drag').addEventListener('click', async () => {
    await fillInput(document.querySelector('#left_image'), '/static/left_art.png');
});

// 绑定右侧图片点击事件
document.querySelector('.demo-image:last-child img').addEventListener('click', async () => {
    await fillInput(document.querySelector('#right_image'), '/static/right_art.png');
});

// 通用填充函数
async function fillInput(input, imgSrc) {
    const response = await fetch(imgSrc);
    const blob = await response.blob();
    const fileName = imgSrc.split('/').pop();
    const file = new File([blob], fileName, { type: blob.type });
    // 创建DataTransfer对象并赋值给输入框
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    input.files = dataTransfer.files;
}

注意事项 #

• 确保图片与页面同源，否则会触发跨域限制；若需使用跨域图片，需配置服务器CORS规则。
• 两种方案都能让表单提交时正常携带图片文件，效果与手动上传一致。

内容的提问来源于stack exchange，提问作者o dawg