Нашла в интернете исходники где сделано загрузку файла. В консоле отображается прогресс (сколько в процентах загрузилось). Все это происходит при изменении поле input (change), вот пример кода.
<input type="file" name="afile" id="afile"/>
<script>
document.querySelector('#afile').addEventListener('change', function(e)
{
//document.getElementById('upload-form').addEventListener('submit', function(e)(
e.preventDefault();
//document.querySelector('#afile').addEventListener('change', function(e) {
var file = this.files[0];
var fd = new FormData();
fd.append("afile", file);
// These extra params aren't necessary but show that you can include other data.
fd.append("username", "Groucho");
fd.append("accountnum", 123456);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handle_file_upload.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
}
};
xhr.onload = function() {
console.log(this.responseText);
// if (this.status == 200) {
// var resp = JSON.parse(this.response);
// console.log('Server got:', resp);
// var image = document.createElement('img');
// image.src = resp.dataUrl;
// document.body.appendChild(image);
//};
};
xhr.send(fd);
}, false);
</script>
</body>
</html>
Код выше работает. Пытаюсь его переделать, чтобы все это происходило через нажатии кнопки submit, но почему-то ничего не происходит файл не грузится, мой переделанный код.
<form method="post" name="upload" id="upload-form"><div>
<input type="file" name="afile" id="afile"/>
<input class="in_input" type="submit" value="Загрузить"></div>
</form>
<script>
document.getElementById('upload-form').addEventListener('submit', function(e)
{
console.log("Test");
var file = this.files[0];
var fd = new FormData();
fd.append("afile", file);
// These extra params aren't necessary but show that you can include other data.
fd.append("username", "Groucho");
fd.append("accountnum", 123456);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handle_file_upload.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
}
};
xhr.onload = function() {
console.log(this.responseText);
// if (this.status == 200) {
// var resp = JSON.parse(this.response);
// console.log('Server got:', resp);
// var image = document.createElement('img');
// image.src = resp.dataUrl;
// document.body.appendChild(image);
//};
};
xhr.send(fd);
}, false);
</script>
</body>
</html>
Как можно исправить, чтобы при выборе файла и нажатии submit он грузился в папку?
