67 lines
2.0 KiB
HTML
67 lines
2.0 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<title>AJAX File multiple upload TEST</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<script src="jquery.min.js" type="text/javascript"></script>
|
|
<script defer src="utils.min.js" type="text/javascript"></script>
|
|
<!-- <script defer src="other.js" type="text/javascript"></script> -->
|
|
<!-- <script defer src="../src/ajaxFileUploadSimple.js" type="text/javascript"></script> -->
|
|
<!-- <link rel=stylesheet type="text/css" href="other.css"> -->
|
|
<script type="text/Javascript">
|
|
$(document).ready(function () {
|
|
var fileInput = document.getElementById('file-input');
|
|
var fileCatcher = document.getElementById('file-catcher');
|
|
var fileListDisplay = document.getElementById('file-list-display');
|
|
var fileList = [];
|
|
var renderFileList, sendFile;
|
|
|
|
fileInput.addEventListener('change', function (ev) {
|
|
fileList = [];
|
|
console.log('Selected files: %s', fileInput.files.length);
|
|
for (var i = 0; i < fileInput.files.length; i ++) {
|
|
console.log('Push file: %s with %o', i, fileInput.files[i]);
|
|
fileList.push(fileInput.files[i]);
|
|
}
|
|
renderFileList();
|
|
});
|
|
|
|
|
|
fileCatcher.addEventListener('submit', function (ev) {
|
|
ev.preventDefault();
|
|
fileList.forEach(function (file) {
|
|
console.log('Send file: %o', file);
|
|
sendFile(file);
|
|
});
|
|
});
|
|
|
|
renderFileList = function () {
|
|
fileListDisplay.innerHTML = '';
|
|
fileList.forEach(function (file, index) {
|
|
var fileDisplayEl = document.createElement('p');
|
|
fileDisplayEl.innerHTML = (index + 1) + ': ' + file.name;
|
|
fileListDisplay.appendChild(fileDisplayEl);
|
|
});
|
|
};
|
|
|
|
|
|
sendFile = function (file) {
|
|
var formData = new FormData();
|
|
var request = new XMLHttpRequest();
|
|
|
|
formData.set('file', file);
|
|
request.open('POST', 'backend.php');
|
|
request.send(formData);
|
|
};
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<form name="file-catcher" id="file-catcher">
|
|
<input id="file-input" type="file" multiple/>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
<div id='file-list-display'></div>
|
|
</body>
|
|
</html>
|