Jump to content

joelzsbit

Members
  • Content count

    26
  • Joined

  • Last visited

Community Reputation

1 Comum

About joelzsbit

Recent Profile Visitors

834 profile views
  1. joelzsbit

    Salvar imagem no banco usando o script compressed

    Alguem tem algum exemplo que usa essa biblioteca e que salva no banco Mysql?
  2. Pessoal implementei o link (https://xkeshi.github.io/image-compressor/) no meu site para fazer a compressão de imagens, porem preciso que essa imagem seja salva no banco. Não estou conseguindo pegar essa imagem comprimida e enviar para um arquivo salvar.php que é o responsável para salvar no banco. A imagem comprimida fica nesse bloco: <div class="w-100 text-center" v-if="outputURL"> <img class="mw-100" :src="outputURL" :alt="output.name"> <div class="mt-2"> <a class="btn btn-sm btn-blocks btn-outline-primary mt-2" :download="output.name" :href="outputURL" title="Download the compressed image">Download</a> </div> </div> Pensei em colocar um botão de salvar ali no lugar do Download, porem como que vou enviar os dados da imagem que estão em javascript para um arquivo salvar.php ?
  3. joelzsbit

    Salvar imagem no banco usando o script compressed

    Pessoal, ainda não consegui resolver o problema. Obrigado por tentarem me ajudar. Vou abrir um tópico na categoria JavaScript.
  4. joelzsbit

    Salvar imagem no banco usando o script compressed

    Ola amigo, obrigado por tentar me ajudar. Recebo através do javascript que manda exibir nessa div: <div class="mt-2"> Não, apenas exibe na div e tem um botão que ao clicar que faz o download da imagem (aqui, não foi upado ainda... faz o download apenas da memória)... nessa linha: Aqui você já upou a imagem... e é isso que nao estou conseguindo upar uma imagem que o javascript exibe numa div. Obs: Queria usar esse "image-compressor", porque tem a vantagem de carregar e redimensionar a imagem rapidamente consequentemente salvando mais rápido no banco no meu caso usando o mysql.
  5. joelzsbit

    Salvar imagem no banco usando o script compressed

    Mas o que preciso é usar o (https://xkeshi.github.io/image-compressor/) para depois passar pro PHP. A imagem aparece nessa div: <div class="mt-2"> <a class="btn btn-sm btn-blocks btn-outline-primary mt-2" :download="output.name" :href="outputURL" title="Download the compressed image">Download</a> </div> Talvez nesse condigo: :download="output.name" :href="outputURL" alterasse para algo como: :upload="output.name" :href="salvar.php" mas como que vou enviar os parâmetros para pegar la no salvar.php?
  6. joelzsbit

    Salvar imagem no banco usando o script compressed

    Ai é que esta o problema, não sei como fazer pra pegar a imagem... ela aparece dentro desa div: <div class="mt-2"> <a class="btn btn-sm btn-blocks btn-outline-primary mt-2" :download="output.name" :href="outputURL" title="Download the compressed image">Download</a> </div>
  7. Pessoal implementei o link (https://xkeshi.github.io/image-compressor/) no meu site para fazer a compressão de imagens, porem preciso que essa imagem seja salva no banco. Não estou conseguindo pegar essa imagem comprimida e enviar para um arquivo salvar.php que é o responsável para salvar no banco. A imagem comprimida fica nesse bloco: <div class="w-100 text-center" v-if="outputURL"> <img class="mw-100" :src="outputURL" :alt="output.name"> <div class="mt-2"> <a class="btn btn-sm btn-blocks btn-outline-primary mt-2" :download="output.name" :href="outputURL" title="Download the compressed image">Download</a> </div> </div> Pensei em colocar um botão de salvar ali no lugar do Download, porem como que vou enviar os dados da imagem para o arquivo salvar.php?
  8. joelzsbit

    Ordenar imagens com o mouse

    Usando o sortable, agora consegui setar a ordem tanto na div como no input fazendo assim: document.getElementById('resultado').innerHTML = valores; ///passa para a div document.getElementById('resultado2').value = valores; // passa para o input Então o código ficou da seguinte forma: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <style> #sortable {list-style-type: none; margin: 0; padding: 0; width: 450px;} #sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 110px; height: 90px; font-size: 4em; text-align: center; } #sortable li img {height:80px; width:100px;} .oculta_span{display:none;} </style> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function () { $("#sortable").sortable(); $("#sortable").disableSelection(); $('.salvar').click(function () { var valores = new Array(); $('#sortable .ordem').each(function () { valores.push($(this).html()); }); document.getElementById('resultado').innerHTML = valores; ///passa para a div document.getElementById('resultado2').value = valores; // passa para o input }); }); </script> </head> <body> <div class="row"> <form method="post" name="form1" role="form" action="<?php echo $_SERVER['PHP_SELF'] ?>" enctype="multipart/form-data"> <ul id="sortable"> <li class="ui-state-default"><span class="ordem">1</span></li> <li class="ui-state-default"><span class="ordem">2</span></li> <li class="ui-state-default"><span class="ordem">3</span></li> <li class="ui-state-default"><span class="ordem">4</span></li> <li class="ui-state-default"><span class="ordem">5</span></li> <li class="ui-state-default"><span class="ordem">6</span></li> <li class="ui-state-default"><span class="ordem">7</span></li> <li class="ui-state-default"><span class="ordem">8</span></li> <li class="ui-state-default"><span class="ordem">9</span></li> </ul> <div id="resultado" style=""></div> <input type="text" name="resultado2" id="resultado2" class="form-control largura450" value=""> <button type="submit" class="btn btn-primary btn-lg salvar"> Salvar </button> <input type="hidden" name="acao" value="cadastra" /> </form> </div> </body> <?php if ($_POST["acao"] == "cadastra"): $arrayOrdem = explode(",", trim($_POST['resultado2'])); // trim retira os espaços e coloca no array onde encontrarr a virgula $quantidade = count($arrayOrdem); // conta quantos itens foi encontrado for ($i = 0; $i < $quantidade; $i++) { echo 'Nr: '.$arrayOrdem[$i]; echo '<br>'; } endif; ?> </html> A principio deu certo, vou fazer mais testes e posto aqui novamente.
  9. joelzsbit

    Ordenar imagens com o mouse

    Então nesse caso é melhor usar o http://jqueryui.com/sortable/#display-grid, que supre bem minha necessidade de uma maneira bem simples e não acontece de substituir a img. O problema é que usando o sortable ainda não consegui fazer setar a ordem em uma div ou num input para que eu possa pegar a ordem com o php e salvar no banco mysql.
  10. joelzsbit

    Ordenar imagens com o mouse

    Amigo, analisando tua implementação acredito que no meu código falta data-id, uma div para setar a ordem e também renomear as function: onde consta: <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> Substitui por: <div id="div1" data-id="1" ondrop="drop(ev)" ondragover="allowDrop(ev)"> e também coloquei uma div para setar o resultado: <div class="container-drop"></div> porém mesmo assim não houve erro e não me mostrou nenhum resultado. O que sera que falta?
  11. joelzsbit

    Ordenar imagens com o mouse

    Pessoal, como que faço para gravar a ordem das imagens que foi ordenada com o mouse, usando esse codigo: <!DOCTYPE HTML> <html> <head> <style> #div1, #div2, #div3 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/imagens/img_cod/924081810.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/imagens/img_cod/924081810.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.