Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite!
Minha questão de hoje é de que o cliente quer arrastar imagem por imagem no drag an drop.
Com o que com consegui na internet é possível arrastar todas em uma única vez, se arrastar novamente atualiza os thumbs pelo mais recente.
Além disso, ele quer arrastar os thumbs para que o upload tenha aquela sequencia, ou seja, os thumbs tem que ter um drag para organizar na sequencia que ele precisa.
A questão principal é como criar esse drag nos thumbs para organizar os mesmos e como modificar o input files para seguir essa sequencia?
Agradeço desde já.
Eu estou tentando adaptar esse que encontrei na net e modifiquei.
Aqui ele adiciona os thumbs de um em um, porem o php só recebe o último arquivo inserido.
Tentei fazer o for porem nada deu certo.
const file = inputTarget.files;
if (file) {
const reader = new FileReader();
for (let i = 0; i < file.length; i++)
{
reader.addEventListener("load", function (e) {
const readerTarget = e.target;
const img = document.createElement("img");
img.src = readerTarget.result;
thumbs.appendChild(img);
});
reader.readAsDataURL(file);
console.log(inputFile.files);
}
Nada deu certo..................
O script que estou usando é o seguinte.
<style type="text/css">
#imput_file {
display: none;
}
.area_input {
width: 400px;
aspect-ratio: 16/9;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
border: 2px dashed currentcolor;
cursor: pointer;
font-family: sans-serif;
transition: color 100ms ease-in-out, background 100ms ease-in-out;
outline: none;
margin: auto;
margin-top: 30px;
}
.area_input:hover {
color: #777;
background: #999;
}
.area_input:active {
border-color: turquoise;
color: turquoise;
background: #eee;
}
.area_input:focus {
color: #777;
background: #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.area_input__img {
width: 100%;
max-width: 150px;
height: 100%;
max-width: 150px;
}
.box
{
width: 100%;
margin: auto;
margin-top: 100px;
}
#recebe_thumb
{
display: flex;
justify-content: center;
column-gap: 10px;
grid-row-gap: 10px;
flex-wrap: wrap;
width: 100%;
max-width: 600px;
height: 100%;
max-height: 600px;
}
#recebe_thumb img
{
width: 100%;
max-width: 100px;
height: 100%;
max-height: 100px;
}
</style>
<form method="POST" action="#" enctype="multipart/form-data">
<label class="area_input" for="imput_file" tabIndex="0" id="drop">
<input type="file" name="imput_file[]" id="imput_file" multiple>
<span id="texto"></span>
</label>
<br>
<button>test</button>
</form>
<div class="box">
<div id="recebe_thumb" draggable="true"></div>
</div>
<script type="text/javascript">
let inputFile = document.querySelector("#imput_file");
let thumbs = document.querySelector("#recebe_thumb");
let areaDrop = document.querySelector("#drop");
let text_shwoed = "Click ou solte as imagens aqui";
let text = document.querySelector("#texto");
text.innerHTML = text_shwoed;
inputFile.addEventListener("change", function (e) {
const inputTarget = e.target;
const file = inputTarget.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function (e) {
const readerTarget = e.target;
const img = document.createElement("img");
img.src = readerTarget.result;
thumbs.appendChild(img);
});
reader.readAsDataURL(file);
} else {
text.innerHTML = text_shwoed;
}
});
Preciso mostrar os thumbs quando forem inseridos vários de uma única vez e/ou de um em um.
Também preciso adicionar no files para que o PHP capture, mesmo quando adicionado de um em um.
Grato por enquanto.Ao meu ver o problema principal é um único input para tudo.
Para cada imagem/arquivo um input deveria ser criado para tal.
Bom dia!
A minha maior dificuldade está em manipular o files, tipo como pegar cada arquivo selecionado e adicionar em um novo input files com um botão delete para cada um deles.
Tentei com o FileReader como no for mostrado acima, mas sem sucesso.
Eu imagino que seja algo parecido com isso.
let inputFile = document.querySelector("#imput_file");
const file = inputTarget.files;
if (file) {
const reader = new FileReader();
for (let i = 0; i < file.length; i++)
{
reader.addEventListener("load", function (e) {
const readerTarget = e.target;
const inputFile = document.createElement('input');
inputFile.type = "file";
inputFile.value = "como passo o valor? É assim mesmo, inputFile.value?";
inputFile.name = "preciso ter um diferente nome para cada um?";
document.document.querySelector('#div_recebe_botao_input').appendChild(inputFile);
const botaoDelete = document.createElement("button");
botaoDelete.value = "como passo o valor? É assim mesmo, botaoDelete.value";
botaoDelete.name = "preciso ter um diferente nome para cada um?";
botaoDelete.innerHTML = 'Excluir';
document.document.querySelector('#div_recebe_botao_delete').appendChild(botaoDelete);
o_que_preciso_aqui.appendChild(o que vai aqui?);
});
o_que_preciso_aqui.readAsDataURL(o que vai aqui?);
}
}Imagino que minha ideia esteja certa, porem na prática nada acontece.
Grato pela atenção.
Boa tarde!
Tive que adaptar esses script jquery que peguei no stackoverflow.
window.AddConteudo = function() {
var texto = $('#texto').val();
$('#texto').val('');
$('#ConteudoMateria').append('<div class="DivPadrao">' + texto + '<br><a href="#" class="MoveUp">Mover p/ cima</a> | <a href="#" class="MoveDown">Mover p/ baixo</a></div>');
}
function MoverBlocoConteudo(index, moveUp) {
var itemlist = $('#ConteudoMateria');
var len = $(itemlist).children().length;
var thisElement = jQuery($(itemlist).children().eq(index));
var nextPosition = (moveUp) ? index - 1 : index + 1;
if (moveUp) {
jQuery($(itemlist).children().eq(nextPosition)).before(thisElement);
} else if (!moveUp) {
jQuery($(itemlist).children().eq(nextPosition)).after(thisElement);
}
}
$(document).ready(function() {
$("#ConteudoMateria").on('click', '.MoveUp, .MoveDown', function(e) {
e.preventDefault();
var index = $(this).parents('.DivPadrao').index();
var isMoveUp = $(this).hasClass('MoveUp');
MoverBlocoConteudo(index, isMoveUp)
});
});
//]]></script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "5w7svk02"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
<script>
let allLines = []
window.addEventListener("message", (message) => {
if (message.data.console){
let insert = document.querySelector("#insert")
allLines.push(message.data.console.payload)
insert.innerHTML = allLines.join(";\r")
let result = eval.call(null, message.data.console.payload)
if (result !== undefined){
console.log(result)
}
}
})
Obrigado pela ajuda galera.
E espero que isso ajude mais alguem.
Olha, isso depende muito da funcionalidade esperada, pelo que descreveu não é possivel definir a vontade do cliente com a necessidade para alcançar a funcionalidade.
A sequencia é importante, por qual razão?
O upload será feito em uma fila ou é esperado paralelismo? se sim, O tamanho do arquivo suportando pelo upload, pode interferir na transferencia?
O client deseja feedback do upload individual em caso de falha ou sucesso?
Mas respondendo sua pergunta, dependendo da sua lógica eu pensaria em usar esse dropzone relacionado a alguma logica de clone do input ou interação do dropzone, mas isso depente muito da usabilidade esperada, ela vai definir o que você pode ou não fazer