После добавления файлов, они сразу грузятся на сервер. Как исправить
document.querySelector('input[name="file"]').addEventListener('change', function(e) {
var file = this.files[0];
var filename = file.name;
var file_id = Math.random().toString().substr(2,6);
var file_ext = file.name.split('.')[file.name.split('.').length-1];
var fd = new FormData();
fd.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '#', true);
var li = '
Ответ
На сколько я понял вам необходим предпросмотр фотографий перед их загрузкой.
"use strict";
var buttonSubmit = document.querySelector(".buttonSubmit");
buttonSubmit.addEventListener("click", loadOnServer, false);
var arrFiles = []; // массив файлов
var photoArea = document.querySelector(".photoArea");
var inputFile = document.querySelector(".inputFile");
inputFile.addEventListener("change", setNewImage, false);
/**
* обрабатываем изменения в input
* @param e
*/
function setNewImage(e) {
var file = e.target.files[0];
arrFiles.push(file); // добавляем в массив файлов
var reader = new FileReader();
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
return image.onload = function () {
var img = document.createElement("img");
img.src = this.src;
// добавляем превью в div
photoArea.appendChild(img);
// вешаем функцию удаления при клике на картинку
img.addEventListener("click", delImage.bind(img, file), false);
return true;
};
};
return reader.readAsDataURL(file);
}
/**
* Делаем запрос с данными на сервер
* @returns {boolean}
*/
function loadOnServer() {
if (arrFiles.length > 0) {
var formData = new FormData();
for (var i = 0; i < arrFiles.length; i += 1) {
formData.append("file[]", arrFiles[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '#', true);
// Ваши функции обработки запроса
xhr.upload.onprogress = function (e) {};
xhr.upload.onerror = function () {};
xhr.send(formData);
}
return false;
}
/**
* Удаляем картинку
*/
function delImage(file) {
this.parentNode.removeChild(this);
this.removeEventListener("click", delImage.bind(this), false);
for (var i = 0; i < arrFiles.length; i += 1) {
if (file === arrFiles[i]) {
delete arrFiles[i];
break;
}
}
}
.photoArea {
margin-top: 20px;
}
.photoArea img {
max-width: 250px;
}
Комментариев нет:
Отправить комментарий