Не получать сделать загрузку файла с прогрессом при нажатии Submit?
Нашла в интернете исходники где сделано загрузку файла. В консоле отображается прогресс (сколько в процентах загрузилось). Все это происходит при изменении поле 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 он грузился в папку? |
Понятно
Цитата:
|
Olga27,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form id="formX" action="upload.php" method="post" enctype="multipart/form-data">
<input id="textX" type="text" name="textX" value="" required>
<input id="fileX" type="file" name="fileX" value="" required>
<input id="buttonX" type="submit" value="Submit">
<progress id="progressX" max="100" value="0"></progress>
<div id="responseX"></div>
</form>
<script>
document.querySelector('#formX').addEventListener('submit', function(e) {
//return; // Displaying upload.php
e.preventDefault();
var formData = new FormData(this), // this = form
progress = this.querySelector('#progressX'),
response = this.querySelector('#responseX');
//formData.append('formId', this.id); // Extra fields
progress.value = 0;
response.innerHTML = 'Uploading...';
var xhr = new XMLHttpRequest();
xhr.open(this.method, this.action, true);
//xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // Detecting AJAX
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};
xhr.onload = function() {
if (this.status == 200) {
response.innerHTML = this.responseText;
} else {
response.innerHTML = 'Server error!';
}
};
xhr.onerror = function() {
response.innerHTML = 'Network error!';
};
xhr.send(formData);
// PHP variables: $_POST['textX'], $_FILES['fileX']
// Optional: $_POST['formId'], $_SERVER['HTTP_X_REQUESTED_WITH']
});
</script>
</body>
</html>
|
При нажатии кнопки если поля пустые то появляется сообщение "заполните поле" и выберите файл, а как добавить еще одно условие например чтобы можно было загружать файлы не больше определенного размера к примеру 50 мб.
|
Цитата:
<input class="input" id="uploadInput" type="file">
<div id="e-fileinfo"></div>
<script>
function updateSize() {
var file = document.getElementById("uploadInput").files[0],
ext = "не определилось",
parts = file.name.split('.');
if (parts.length > 1) ext = parts.pop();
document.getElementById("e-fileinfo").innerHTML = [
"Размер файла: " + file.size + " B",
"Расширение: " + ext,
"MIME тип: " + file.type
].join("<br>");
}
document.getElementById('uploadInput').addEventListener('change', updateSize);
</script>
|
Olga27, изи
document.querySelector('#fileX').addEventListener('change', function(e) {
this.setCustomValidity('');
for (var i = 0; i < this.files.length; i++) {
if (this.files[i].size / (1024 * 1024) > 50) {
this.setCustomValidity('Maximum file size 50 MB');
break;
}
}
if (this.reportValidity) this.reportValidity();
});
ksa, в Хром, если в окне выбора файла нажать Отмена, то files.length будет 0. |
Цитата:
Мой пример лишь иллюстрация того, где и какие данные по файлу можно взять. Пример не обязан отрабатывать все "аварийные" условия... |
| Часовой пояс GMT +3, время: 02:52. |