如何在表单提交时发送JavaScript中存储的图片文件？

你遇到的核心问题是：原生表单提交只会发送表单内<input>等表单控件的内容，存在JS变量imageMap里的图片文件不会被自动提交；而且直接给file类型input赋值File对象是无效的——因为这类input的value是只读的字符串，无法通过JS直接设置文件内容。

下面提供两种可行的解决方式，按需选择：

方案一：FormData + AJAX提交（推荐，更灵活） #

通过FormData收集表单所有字段和imageMap里的图片，再用AJAX发送，无需依赖原生表单提交逻辑。

修改提交按钮的点击事件代码：

$(document).on('click', ".sub_form", function () {
    // 创建FormData，自动包含原表单的所有字段
    const formData = new FormData(document.getElementById('my_form'));
    
    // 将imageMap中的所有图片添加到FormData，用`images[]`作为字段名方便后端识别为数组
    Object.values(imageMap).forEach(file => {
        formData.append('images[]', file);
    });
    
    // 发送AJAX请求
    $.ajax({
        url: $('#my_form').attr('action'),
        type: 'POST',
        data: formData,
        processData: false, // 必须：禁止jQuery处理FormData
        contentType: false, // 必须：让浏览器自动设置正确的Content-Type
        success: function(response) {
            // 提交成功后的逻辑，比如跳转或提示
            console.log('提交成功');
            // window.location.href = '/success-page';
        },
        error: function(xhr) {
            console.error('提交失败', xhr);
            // 错误处理逻辑
        }
    });
});

方案二：动态创建隐藏file输入框（适合必须用原生表单提交的场景） #

在表单内新增一个隐藏容器，每次选择图片时创建对应的隐藏file输入框并绑定文件；删除图片时同步删除对应的隐藏输入框，确保原生表单提交时能包含所有图片。

步骤1：在表单内添加隐藏容器 #

<form id="my_form" name="my_form" method="post" enctype="multipart/form-data" action="....">
    ....
    <label for="img_picker">เลือกไฟล์ภาพ</label>
    <input type="file" id="img_picker" class="hidden" multiple>
    <div id="img_preview"></div>
    <!-- 新增：存放动态创建的隐藏file输入框 -->
    <div id="hidden_files_container" class="hidden"></div>
    ....
    <button type="button" class="btn btn-primary sub_form">save</button>
</form>

步骤2：修改图片选择的change事件 #

var imageMap = {};

$('#img_picker').on('change', function () {
    for (const file of this.files) {
        const key = "id" + Math.random().toString(16).slice(2);
        imageMap[key] = file;

        // 新增：创建隐藏的file输入框并绑定当前文件
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'file';
        hiddenInput.name = 'images[]';
        hiddenInput.classList.add('hidden');
        hiddenInput.dataset.key = key; // 标记key，方便删除时匹配
        
        // 通过DataTransfer设置文件（现代浏览器支持）
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        hiddenInput.files = dataTransfer.files;
        
        document.getElementById('hidden_files_container').appendChild(hiddenInput);

        // 以下是原有的预览图创建逻辑，无需修改
        const reader = new FileReader();
        reader.onload = (e) => {
            const img = document.createElement('img');
            img.classList.add('img-thumbnail', 'mb-2');
            img.style.width = '100px';
            img.src = e.target.result;

            const deleteButton = document.createElement('button');
            deleteButton.classList.add('btn', 'btn-danger', 'btn-sm');
            deleteButton.textContent = 'delete';
            deleteButton.onclick = () => {
                img.parentNode.removeChild(img);
                deleteButton.parentNode.removeChild(deleteButton);
                delete imageMap[key];
                // 新增：删除对应的隐藏输入框
                const targetInput = document.querySelector(`#hidden_files_container input[data-key="${key}"]`);
                if (targetInput) targetInput.parentNode.removeChild(targetInput);
            };

            const div = document.createElement('div');
            div.appendChild(img);
            div.appendChild(deleteButton);

            $('#img_preview').append(div);
        };
        reader.readAsDataURL(file);
    }

    this.value = null;
});

步骤3：保留原提交逻辑 #

原生表单提交会自动包含隐藏容器内的所有file输入框，所以原提交代码无需修改：

$(document).on('click', ".sub_form", function () {
    document.getElementById('my_form').submit();
});

• 后端接收时，需使用你设置的字段名（比如images[]）来获取上传的文件数组。
• 方案二的DataTransfer API兼容所有现代主流浏览器，若需兼容极旧浏览器需额外处理。

内容的提问来源于stack exchange，提问作者Sittiphan Sittisak