Bom dia gente, queria fazer um monte de input tipo file mas que arraste e tenha lista, eu achei varios tutorias mas não entendi muito bem,eu peguei um, mas quando eu faço de novo o codigo Javascript ele não roda, alguem ppode me ajudar?! (Ja rescrevi as variaveis e todos as funções e mesmo assim nada...)
Codigo q eu peguei da net:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vamos Uploadingar</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="area-upload">
<label for="upload-file" class="label-upload">
<i class="fas fa-cloud-upload-alt"></i>
<div class="texto">Clique ou arraste o arquivo</div>
</label>
<input type="file" accept="image/jpg,image/png" id="upload-file2" multiple/>
<div class="lista-uploads">
</div>
</div>
<br>
<br>
<script>
let decida = document.querySelector('.area-upload #upload-file2');
decida.addEventListener('dragenter', function(){
document.querySelector('.area-upload .label-upload').classList.add('highlight');
});
decida.addEventListener('dragleave', function(){
document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});
decida.addEventListener('drop', function(){
document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});
document.querySelector('#upload-file2').addEventListener('change', function() {
var files2 = this.files;
for(var i = 0; i < files2.length; i++){
var info2 = validarArquivo2(files2[i]);
//Criar barra
var barra2 = document.createElement("div");
var fill2 = document.createElement("div");
var text2 = document.createElement("div");
barra2.appendChild(fill2);
barra2.appendChild(text2);
barra2.classList.add("barra");
fill2.classList.add("fill");
text2.classList.add("text");
if(info2.error == undefined){
text2.innerHTML = info2.success;
enviarArquivo2(i, barra2); //Enviar
}else{
text2.innerHTML = info2.error;
barra2.classList.add("error");
}
//Adicionar barra
document.querySelector('.lista-uploads').appendChild(barra2);
};
});
function validarArquivo2(file2){
console.log(file2);
// Tipos permitidos
var mime_types = [ 'image/jpeg', 'image/png' ];
// Validar os tipos
if(mime_types.indexOf(file2.type) == -1) {
return {"error" : "O arquivo " + file2.name + " não permitido"};
}
// Apenas 2MB é permitido
if(file2.size > 2*1024*1024) {
return {"error" : file2.name + " ultrapassou limite de 2MB"};
}
// Se der tudo certo
return {"success": "Enviando: " + file2.name};
}
function enviarArquivo2(indice2, barra2){
var data = new FormData();
var request = new XMLHttpRequest();
//Adicionar arquivo
data.append('file', document.querySelector('#upload-file2').files[indice2]);
// AJAX request finished
request.addEventListener('load', function(e) {
// Resposta
if(request.response.status == "success"){
barra2.querySelector(".text").innerHTML = "<a href=\"" + request.response.path + "\" target=\"_blank\">" + request.response.name + "</a> <i class=\"fas fa-check\"></i>";
barra2.classList.add("complete");
}else{
barra2.querySelector(".text").innerHTML = "Erro ao enviar: " + request.response.name;
barra2.classList.add("error");
}
});
// Calcular e mostrar o progresso
request.upload.addEventListener('progress', function(e) {
var percent_complete = (e.loaded / e.total)*100;
barra2.querySelector(".fill").style.minWidth = percent_complete + "%";
});
//Resposta em JSON
request.responseType = 'json';
// Caminho
request.open('post', 'upload.php');
request.send(data);
}
</script>