Question

我已经看过一些如何使用Html5文件API（例如此str::Chars）进行文件上传的教程。 我想要的是如何将所有这些从浏览器发送到后端并在那里处理以实际上传文件的一些指示。在这些教程中它没有显示。

后端语言并不重要。

我不想使用外部js库，只使用纯javascript。

Answer 1

document.getElementById('fileinput').addEventListener('change', function(){
var fd = new FormData();
   for(var i = 0; i<this.files.length; i++){
var file = this.files[i];
fd.append("upload_file"+i, file);
}
uploadFile(fd);
}

function uploadFile(fd){
var url = 'server/index.php';
var xhr = new XMLHttpRequest();

xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        // Every thing ok, file uploaded
        console.log(xhr.responseText); // handle response.
    }
};
xhr.send(fd);
}

使用以下HTML。

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />

Html 5文件上传以及如何将文件从浏览器发送到后端

1 个答案: