Estou a trabalhar num sistema de upload multiplo de imagens.
A pessoa seleciona as imagens através de drag and drop ou procurando pelo computador:
De seguida são apresentadas as fotos que a pessoa selecionou.
Contudo quando se clica no x para apagar uma das fotos e de seguida enviasse o formulário, a foto realmente não foi apagada e é enviada para o servidor, tal como demonstra aqui:
Aqui está o código do meu js, html e do meu php:
JS:
/**
* Show Drag & Drop multiple image preview
*
* @author Anuj Kumar
* @link https://instagram.com/webtricks.ak
* @link https://github.com/wtricks
* */
/** Variables */
let files = [],
dragArea = document.querySelector('.drag-area'),
input = document.querySelector('.drag-area input'),
button = document.querySelector('.card button'),
select = document.querySelector('.drag-area .select'),
container = document.querySelector('.container');
/** CLICK LISTENER */
select.addEventListener('click', () => input.click());
/* INPUT CHANGE EVENT */
input.addEventListener('change', () => {
let file = input.files;
// if user select no image
if (file.length == 0) return;
for(let i = 0; i < file.length; i++) {
if (file[i].type.split("/")[0] != 'image') continue;
if (!files.some(e => e.name == file[i].name)) files.push(file[i])
}
showImages();
});
/** SHOW IMAGES */
function showImages() {
container.innerHTML = files.reduce((prev, curr, index) => {
return `${prev}
<div class="image">
<span onclick="delImage(${index})">×</span>
<img src="${URL.createObjectURL(curr)}" />
</div>`
}, '');
}
/* DELETE IMAGE */
function delImage(index) {
files.splice(index, 1);
showImages();
}
/* DRAG & DROP */
dragArea.addEventListener('dragover', e => {
e.preventDefault()
dragArea.classList.add('dragover')
})
/* DRAG LEAVE */
dragArea.addEventListener('dragleave', e => {
e.preventDefault()
dragArea.classList.remove('dragover')
});
/* DROP EVENT */
dragArea.addEventListener('drop', e => {
e.preventDefault()
dragArea.classList.remove('dragover');
let file = e.dataTransfer.files;
for (let i = 0; i < file.length; i++) {
/** Check selected file is image */
if (file[i].type.split("/")[0] != 'image') continue;
if (!files.some(e => e.name == file[i].name)) files.push(file[i])
}
showImages();
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag & Drop multiple images uploading using Pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="app.css">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form enctype="multipart/form-data" method="POST" action="upload.php">
<div class="card">
<div class="top">
<p>Drag & drop image uploading</p>
</div>
<div class="drag-area">
<span class="visible">
Drags & drop image here or
<span class="select" role="button">Browse</span>
</span>
<span class="on-drop">Drop images heres</span>
<input name="file[]" type="file" class="file" multiple="multiple" />
</div>
<!-- IMAGE PREVIEW CONTAINER -->
<div class="container"></div>
</div>
<input type="submit" value="Send Request" />
</form>
<script src="app.js"></script>
</body>
</html>
PHP:
<?php
//diretório para salvar as imagens
$diretorio = "imagens/";
//Verificar a existência do diretório para salvar as imagens e informa se o caminho é um diretório
if(!is_dir($diretorio)){
echo "Pasta $diretorio nao existe";
}else{
$arquivo = isset($_FILES['file']) ? $_FILES['file'] : FALSE;
//loop para ler as imagens
for ($controle = 0; $controle < count($arquivo['name']); $controle++){
$destino = $diretorio."/".$arquivo['name'][$controle];
//realizar o upload da imagem em php
//move_uploaded_file — Move um arquivo enviado para uma nova localização
if(move_uploaded_file($arquivo['tmp_name'][$controle], $destino)){
echo "Upload realizado com sucesso<br>";
}else{
echo "Erro ao realizar upload";
}
}
}
?>
Como posso resolver este problema?