-3

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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

inserir a descrição da imagem 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})">&times;</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?

2
  • Qual é o código do botão "send request"? Commented 20/10/2022 às 9:45
  • É um input do tipo submit, para enviar o formulário.
    – Gonçalo
    Commented 21/10/2022 às 1:00

1 Resposta 1

-2

Este plugin está a criar um array com vários ficheiros. Se submeteres o formulário normalmente apenas vais enviar o último ficheiro que for escolhido. A função de delete apenas age sobre o array. Você tem que usar ajax e percorrer o array para submeter os ficheiros um a um.

E tem que modificar o ficheiro PHP para aceitar apenas um ficheiro.

$("form").on("submit", function(e) {
    e.preventDefault();;

    for (var i in files) {
        var form_data = new FormData();
        form_data.append("file", files[i]);
        $.ajax({
            type:'POST',
            url:'upload.php',
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            data : form_data,
            success: function(response){
                console.log("Ficheiro submetido com sucesso.");
            }
        });
    }
});

upload.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{    
    if (isset($_FILES['file'])) {  
        $arquivo = $_FILES['file'];  
        $destino = $diretorio."/".$arquivo['name'];
        if(move_uploaded_file($arquivo['tmp_name'], $destino)){
            echo "Upload realizado com sucesso<br>"; 
        }else{
            echo "Erro ao realizar upload";
        }        
    }
}
?>
5
  • Olá Tomás! Funcionou na perfeição, contudo apenas mais uma questão se eu quiser enviar outros parametros como inputs do tipo text, o formulário já não irá validar, neste caso qual a solução?
    – Gonçalo
    Commented 21/10/2022 às 14:11
  • O objeto FormData permite adicionar valores em texto. Commented 21/10/2022 às 14:21
  • Não é possível fazer com que as imagens fossem para um upload2 e o formulario para um upload1.php de forma a que conseguisse enviar o resto das coisas normalmente por formulário? Ou que depois de clicar no submit redirecionasse para outro pagina
    – Gonçalo
    Commented 21/10/2022 às 14:33
  • Ou seja, algo deste genero de forma a que as fotos fossem para o upload2, e o resto fosse normalmente para o formulário. Da para fazer algo deste genero? Neste caso criei a função enviaFotos(); e depois com o click no botao ativava, so que nao esta a funcionar da maneira que desejo. pastebin.com/mFv3XbPj
    – Gonçalo
    Commented 21/10/2022 às 14:39
  • E como é que vais dar um único nome a múltiplos ficheiros? Commented 21/10/2022 às 15:52

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .