AJAX - 如何从输入文件获取数据以附加到formdata？

Question

你好，我想使用纯JavaScript的Ajax（不使用jQuery）来追加FormData，但我不知道如何获取输入文件类型的数据。

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>

- doflamingo

---

你的 file 选择器查询在哪里？ - NewToJS

抱歉，我的文件选择器是 #myimg。 - doflamingo

那么，为myimg添加一个选择器查询，就像你在username和email中一样，这不是一个好主意吗？ - NewToJS

Answer 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

- Andreas

Answer 2

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

尝试

- Unamed

---

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

Answer 3

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

获取文件...您可以使用

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

- Muhammad Usman

---

嗯，这对我来说看起来像是jQuery...“纯JavaScript Ajax（没有jQuery）” - NewToJS