首页 > 解决方案 > 用文件填充 FormData 对象期间的问题

问题描述

Ubuntu 18.04 + 火狐 70.0

我想通过XMLHttpRequest. 我使用最简单的 HTML 标记和 JS 脚本进行测试,根据: https ://developer.mozilla.org/en-US/docs/Web/API/FormData https://developer.mozilla.org/en-US/docs /Web/API/FormData/appendhttps://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

我不能在声明的 FormData 对象中传输选定的文件,不能使用新的 FormData(FormObject),也不能用循环中的文件填充 FormData。

<form id='mcp-form0' enctype="multipart/form-data" method="post">
    <input type="file" name="fichier" id="fichier" multiple="">
</form>

<script>
    let inputElement = document.getElementById('fichier');
    inputElement.addEventListener('change', handleFiles, false);

    function handleFiles() {
        let formDataConstructor = new FormData(document.getElementById('mcp-form0')),
            formDataLoop = new FormData(),
            control = "\nSelected : \n",
            fileList = this.files;
        for (let i = 0, n = fileList.length; i < n; i++) {
            let file = fileList[i];
            formDataLoop.append("userfile[]", file, file.name);
            control += "File : " + file.name + " de " + file.size + " bytes (" + file.type + ")\n";
        }

        console.log(control);
        console.log(fileList);
        console.log(formDataConstructor);
        console.log(formDataLoop);
    }
</script>

控制台答案是:

Selected : 
Fichier : RetourPantalonMinouTiq.pdf de 33699 octets (application/pdf)
Fichier : rel01png.pdf de 47511 octets (application/pdf)
Fichier : rel00png.pdf de 101450 octets (application/pdf)

FileList(3) [ File, File, File ]

FormData {  }

FormData {  }

var 'control' 的详细信息表明循环完成了正确的工作,但是将包含我选择的 3 个文件的 'formDataConstructor' FormData 构造函数填充对象是空的,同循环中填充的 'formDataLoop' FormData 对象.

我希望他们俩都是:

FormData { File, File, File }

我找不到我的错误。你能帮帮我吗?

标签: javascriptform-data

解决方案


推荐阅读