AJAX - 如何从输入文件中获取数据以附加表单数据？

Posted 2023-03-05

【中文标题】AJAX - 如何从输入文件中获取数据以附加表单数据？

【英文标题】：AJAX - How to get data from input file to append formdata?

【发布时间】：2017-05-13 19:06:22

【问题描述】：

您好，我想使用纯 javascript ajax（没有 jquery）来附加表单数据，但我不知道如何从输入文件类型中获取数据

function handleForm(e) 

    e.preventDefault();
    var username = document.getElementById('username').value;
    var email = document.getElementById('email').value;

    var data = new FormData();

    data.append('username', username); 
    data.append('email', email);
    data.append('file', ?????);  ////// How to get data from input file


    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'test2.php', true);

    xhr.onload = function(e) 
        if(this.status == 200) 
            console.log(e.currentTarget.responseText);  
            alert(e.currentTarget.responseText + ' items uploaded.');

        
    

    xhr.send(data);

...

    Username: <input type="text" name="username" id="username"><br/>
    Email: <input type="text" name="email" id="email"><br/>
    Image: <input type="file" name="file" id="myimg"><br/>

    <input type="submit">
</form>

【问题讨论】：

file....的选择器查询在哪里

对不起，我的文件选择器是#myimg

那么像 username 和 email 那样对 myimg 进行选择器查询不是一个好主意吗？

【参考方案1】：

<input type="file" /> html 元素有一个files 属性（FileList 类型）。 如果选择了文件，请检查长度，如果是，则将文件添加到 FormData 对象

var fileInput = document.getElementById("myimg");
if (fileInput.files.length > 0) 
    data.append("file", fileInput.files[0]);

有关如何使用FormData 对象的更多示例，请查看此链接： https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

【参考方案2】：

document.getElementById("file_input_id").files[0]

试试

【讨论】：

解释为什么 OP 应该使用它并解释为什么它有 .file[0] 不是一个好主意如果你想发布答案/解决方案，我强烈建议像某些人一样给出详细的答案希望从给出的答案/解决方案中学习，而不仅仅是复制/粘贴它们。

【参考方案3】：

<input type="file" id="fileinput" />

获取文件..你可以使用

var myFile = $('#fileinput').prop('files')[0];

【讨论】：

嗯，这对我来说就像 jQuery... "pure javascript ajax (no jquery)"