file upload using ajax
Table of Contents
#
File upload using ajax
Use FormData objects Using FormData Objects
FormData object only IE 10 up if IE use ajax upload, only use iframe method.
##
sample
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>upload_AJAX</title>
</head>
<body>
<form action="upload_one.php" method="post" enctype="multipart/form-data">
<label for="file">File:</label>
<input type="file" name="Upfile" id="select"><br>
<input type="submit">
</form>
<a href="javascript:upload()">AJAX_upload</a>
</body>
</html>
JavaScript
function upload () {
// init FormData object
var formData = new FormData();
// use append method append upload file
formData.append('Upfile', document.getElementById('select').files[0]);
// init XMLHttpRequest object
var xmlHttpRequest = new XMLHttpRequest();
// init to backend
xmlHttpRequest.open('POST', 'upload_one.php');
// check ajax status
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.status == 200) {
alert('upload');
}
}
};
// post to backend
xmlHttpRequest.send(formData);
}