Ir para conteúdo
luiz monteiro

Reorganizar thumbs do preview com javascript puro

Recommended Posts

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á.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ao meu ver o problema principal é um único input para tudo.

Para cada imagem/arquivo um input deveria ser criado para tal.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>&nbsp;&nbsp;|&nbsp;&nbsp;<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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
    • Por Rafael Castelhano
      Olá, quero preencher um dict dinamicamente onde a chave é uma string multidimencional no dict, ex:
      var dict = {} var path = 'a.b.c' dict[path] = 55 // isso faz dict ficar desta forma {'a.b.c': 55} // mais quero que fique assim {a: {b: {c: 55}}} Como consigo alterar desta forma? 
    • Por violin101
      Caros amigos, saudações.
       
      Estou com um problema de cálculo que não estou conseguindo resolver.
       
      Tenho uma rotina em Javascript que faz o seguinte cálculo qtde x vrUnit = total.
       
      qtde   x  vrUnit    =    total
      1,23   x  1,00       =    1,23    << até aqui tudo bem.
       
      o problema seria fazer o arredondamento para cima para impedir de fazer este cálculo:
      0,01 x 0,01 = 0,0001
       
      para digitar o valor estou utilizando esta função:
       
      /*Esta função quando o usuário digitar o valor aparece * 1,23 */ function formataDigitacao(i) { //Adiciona os dados para a másrcara var decimais = 2; var separador_milhar = '.'; var separador_decimal = ','; var decimais_ele = Math.pow(10, decimais); var thousand_separator = '$1'+separador_milhar; var v = i.value.replace(/\D/g,''); v = (v/decimais_ele).toFixed(decimais) + ''; var splits = v.split("."); var p_parte = splits[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, thousand_separator); (typeof splits[1] === "undefined") ? i.value = p_parte : i.value = p_parte+separador_decimal+splits[1]; } /*Esta função faz a multiplicação entre Valor Unitário X Quantidade *faz a multiplicação correta */ function calcProd(){ //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Obter valor digitado do produto var valor_unit = document.getElementById("vlrunit").value; //Remover ponto e trocar a virgula por ponto while (valor_unit.indexOf(".") >= 0) { valor_unit = valor_unit.replace(".", ""); } valor_unit = valor_unit.replace(",","."); //Calcula o Valor do Desconto if (valor_unit > 0 && prod_qtde > 0) { calc_total_produto = (parseFloat(valor_unit) * parseFloat(prod_qtde)); var numero = calc_total_produto.toFixed(2).split('.'); //<<== aqui faço o arredondamento das casas decimais de 1,234 p/ 1,23 numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("vlrtotal").value = numero.join(','); } else { if (valor_unit > 0) { document.getElementById("vlrtotal").value = document.getElementById("vlrunit").value; } else { document.getElementById("vlrtotal").value = "0,00"; } } } Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.