Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Omar~

Barra de progresso em Upload de imagem, bug do Mozilla?

Por , em Javascript

Recommended Posts

Omar~    87

Omar~
Postado

Opa beleza pessoal? É o seguinte criei uma aplicação javascript aqui, para upload de arquivos(imagens) que mostra uma previa da mesma antes de salvar.

Fiz o testes em alguns navegadores e em 3 não funcionou como esperado.

IE e Edge como era de se esperar por serem péssimos navegadores a coisa não funcionou.

Porém meu descontamento foi com o mozilla firefox (atualizado) cujo o monitoramento do progresso não funciona corretamente.

 

Assim sendo a medida que o navegador vai lendo o arquivo enviado ele alterar a largura em porcentagem de um elemento html que é a barra de progresso exibindo assim o status do envio. E ai que entra o problema, pois ás vezes no "mozilla" a barra fica entre 1 e 12% independente do tamanho de bits da imagem como se o monitoramento não chegasse ao final, já no chrome, opera e safari o monitoramento se completa.

Se quiserem dar uma olhada e testar para confirmar que é realmente um bug de um navegador específico ficaria grato. Ou mesmo se saber o que está causando essa anomalia.

 

Obs.: O intuito disso é que depois de criada e prévia vou fazer uma função para cortar e redimensionar o tamanho, pós então criar a função que irá enviar a imagem para o servidor ou mesmo salvar-la como base64 para gravar em banco de dados (ainda não decidir o que realmente vou fazer).

O javascript está bem genérico e simples pois ainda é um embrião do realmente vai ser.

 

Nota: Fiz o teste no mozilla enviando arquivos "que não são imagem com a função liberada para esses tipos de arquivos sem usar previa" o monitoramento funcionou corretamente como estimado, tipos de arquivo TXT, DOCX, videos, BIN, EXE etc... o problema só são imagens mesmo.

 

HTML + CSS

Spoiler 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="Upload.js" type="text/javascript"></script>
        <title></title>
        <style>
            #dropbox {
                height: 500px;
                width: 100%;
                border: 2px dotted #000000
            }
            #dropbox:hover {
                background: gray
            }
            #progess-bar {
                position: fixed;
                top: 0;
                left: 0;
                height: 2px;
                width: 0;
                background: #ff0000;
                border-top: 1px solid #800000;
                border-bottom: 1px solid #800000
            }
            #preview {
                max-width: 100%;
                overflow-x: scroll
            }
            .img-prev {
                height: 240px
            }
        </style>
    </head>
    <body>
        <div id="progess-bar"></div>
        <div id="preview"></div>
        <div id="dropbox"></div>

        <script>var up = new Upload();</script>
    </body>
</html>

 

 

Javascript

Spoiler 

var Upload = function () {
    var $dropField = document.getElementById('dropbox');
    var $progressBar = document.getElementById('progess-bar');
    var $transfer, $file, $reader, $image;
    $upProgress = 0;

    // remover o comportamento padrão do navegador dentro da box de envio
    function stopEvent(event) {
        event.stopPropagation();
        event.preventDefault();
    }

    // obter o arquivo
    function getFile(event) {
        event.stopPropagation();
        event.preventDefault();
        $transfer = event.dataTransfer.files;
        checkFile($transfer);
    }

    // Checar o tipo de arquivo e criar o cabeçalho
    function checkFile(files) {
        $upProgress = 0;
        $progressBar.style.width = 0;
        $reader = new FileReader();
        $reader.addEventListener('progress', progress, true);
        $file = files[0]; // Se for mais de 1 arquivo só seleciona o primeiro
        if (/\.(jpe?g|png|gif)$/i.test($file.name)) {
            createPrev($file);
        }
    }

    // criar uma imagem igual a enviada
    function createPrev(file) {
        var preview = document.getElementById('preview');
        $image = document.createElement('img');
        $image.classList.add('img-prev');
        $image.file = file;
        preview.appendChild($image);
        $reader.addEventListener('load', loadPreview, true);
        $reader.readAsDataURL(file);
    }

    // exibir a imagem enviada
    function loadPreview(event) {
        $image.src = event.target.result;
        setTimeout(function () {
            $upProgress = 0;
            $progressBar.style.width = 0;
        }, 500);
    }

    // barra de progresso
    function progress(event) {
        if (event.lengthComputable) {
            $upProgress = Math.round((event.loaded / event.total) * 100);
            $progressBar.style.width = $upProgress + '%';
        }
    }

    // Adicionar os eventos drap & drop no box de envio
    $dropField.addEventListener('dragenter', stopEvent, false);
    $dropField.addEventListener('dragover', stopEvent, false);
    $dropField.addEventListener('drop', getFile, false);
};

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • iagomonteiro
      Condições com Drag And Drop
      Por iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • Felipe Schmidt
      Drag and Drop Randômico
      Por Felipe Schmidt
      Galera preciso de um ajuda... To quebrando a cabeça com isso.
      Preciso que um dos três números 1 se encaixem no primeiro quadro, depois vão sobrar 2, um desses dois tem que se encaixar no 4 quadro e o que sobrar se encaixe no 7 quadro. Independente de qual escolher, ele precisa encaixar.
       
      Será que conseguem me ajudar com isso?
      Muito Obrigado.
       
       

      <!DOCTYPE html>
      <html lang="pt">
      <head>
          <title>Vetoquinol Game</title>
          <meta name="generator" content="BBEdit 7.0.3" />
          
      <link rel="Stylesheet" href="css/style.css" type="text/css" />
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui.min.js"></script>

          <style type="text/css">
              p{font-size:1em;}
              .caption{font-size:.8em;
              font-weight:bold;}
              /*img{border:solid 1px #000000;}*/
              td{vertical-align:top;}
              #draggable { width: 24px; height: 24px; background: red; }
      #helper { width: 24px; height: 24px; background: yellow; }

       
      /* Main content area */
       
      #gameContent {
       margin: 10px;
        font-family: Georgia, serif;
        line-height: 1.1em;
        color: #333;
        margin: 5px 5px;
        text-align: center;
      }
       
      #cardPile {
        /*margin: 0 auto;*/
        background: #fff;
      }
       
      #cardSlots {
        float:right;
        margin: -515px 30px 0 auto;
        background: #b2b2b2;
      }
       
      #cardSlots, #cardPile {
          width: 423px;
          height: 442px;
          padding: 33px;
          border: 3px solid #333;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
          -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
          box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      }
       
      /* Individual cards and slots */
       
      #cardPile div {
        float: left;
        width: 130px;
        height: 130px;
        padding: 1px;
        padding-bottom: 0;
        /*border: 2px solid #333;*/
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        margin: 10px 5px 0 0px;
        /*background: #fff;*/
      }
      #cardSlots div {
        float: left;
        width: 130px;
        height: 130px;
        padding: 1px;
        padding-bottom: 0;
        border: 0px solid #333;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        margin: 10px 5px 0 0px;
        /*background: #fff;*/
      }
       
      #cardSlots div:first-child, #cardPile div:first-child {
        margin-left: 0;
      }
       
      #cardSlots div.hovered {
        background: #aaa;
      }
       
      #cardSlots div {
        border-style: dashed;
      }
       
      #cardPile div {
        /*background: #666;*/
        /*color: #fff;*/
        /*font-size: .8em;*/
        /*text-shadow: 0 2px 2px #000;*/
      }
       
      #cardPile div.ui-draggable-dragging {
        -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
      }
       
      /* Individually coloured cards */
      /* 
      #card1.correct { background: green; }
      #card2.correct { background: green; }
      #card3.correct { background: green; }
      #card4.correct { background: green; }
      #card5.correct { background: green; }
      #card6.correct { background: green; }
      #card7.correct { background: green; }
      #card8.correct { background: green; }
      #card9.correct { background: green; }
      #card10.correct { background: green; }
      #card11.correct { background: green; }
      #card12.correct { background: green; }
       */
       
      /* "You did it!" message */
      #successMessage {
          position: absolute;
          left: 480px;
          top: 500px;
          width: 323px;
          height: 0;
          z-index: 100;
          background: #ccc;
          border: 2px solid #333;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
          -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
          box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
          padding: 20px;
      }
      #message {
        position: absolute;
        left: 580px;
        top: 750px;
        width: 0;
        height: 0;
        z-index: 100;
        background: #fff;
        border: 2px solid #333;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
        -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
        box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
        padding: 20px;
      }
              </style>
      <script type="text/javascript">
      //<!--
          title="Vetoquinol Game";
          subject="SEP";
              var list=new Array("part1");
           
      // Usage:

           function showAnswer(id){
      if(document.getElementById(id).style.display=="none"){
              document.getElementById(id).style.display="";
          }else{
          document.getElementById(id).style.display="none";
          }
          }
            function hideAll(){
            for(i=0;i<list.length;i++){
      document.getElementById(list).style.display="none";
          }
          }
          $(function(){
      $("#answers").hide("fast");
           $("#answersToggle").click(function(){
               $("#answers").toggle("slow");
            });
            $("#answer1").hide("fast");
      $("#answer2").hide("fast");
           $("#answer1Toggle").click(function(){
               $("#answer1").toggle("slow");
               $("#answer2").hide("fast");
            });
            $("#answer2Toggle").click(function(){
               $("#answer2").toggle("slow");
               $("#answer1").hide("fast");
            });
      });
      $( init );
       
      function init() {
        $('#makeMeDraggable').draggable();
        $('#draggable').draggable( {
          cursor: 'move',
          containment: 'document',
          helper: helper
        } );
      }
      function helper( event ) {
        return '<div id="helper" style="font-size:.6em;">drag!</div>';
      }
      var correctCards = 0;
      $( gameInit );
       
      function gameInit() {
       
        // Hide the success message
        $('#successMessage').hide();
        $('#successMessage').css( {
          left: '580px',
          top: '750px',
          width: 0,
          height: 0
        } );
        $('#message').hide();
        $('#message').css( {
          left: '580px',
          top: '750px',
          width: 0,
          height: 0
        } );
        // Reset the game
        correctCards =0;
        $('#cardPile').html( '' );
        $('#cardSlots').html( '' );
       var numOfCards=9;
        // Create the pile of shuffled cards
        var numbers = [ 1, 2, 3, 1, 5, 1, 7, 8, 9 ] ;
        var text = [ '1', 
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9'];
        
        //var text = [ '<img src="images/enisyl.png" width="136" height="135" />', 
        //'<img src="images/flevox.png" width="136" height="135" />',
        //'<img src="images/cimalgex.png" width="136" height="135" />',
        //'<img src="images/enisyl.png" width="136" height="135" />',
        //'<img src="images/program.png" width="136" height="135" />',
        //'<img src="images/cimalgex.png" width="136" height="135" />',
        //'<img src="images/flevox.png" width="136" height="135" />',
        //'<img src="images/cimalgex.png" width="136" height="135" />',
        //'<img src="images/program.png" width="136" height="135" />'];
       numbers.sort( function() { return Math.random() - .05 - .05 } );
       
        for ( var i=0; i<text.length; i++ ) {
          $('<div>' + text[numbers-1] + '</div>').data( 'number', numbers ).attr( 'id', 'card'+numbers ).appendTo( '#cardPile' ).draggable( {
            containment: '#content',
            stack: '#cardPile div',
            cursor: 'move',
            revert: true,
            start:hideMessage
            
          } );
        }
       
        // Create the card slots
        var words = ['<img src="images/quadro1.png" width="136" height="135" />', '<img src="images/quadro2.png" width="136" height="135" />', '<img src="images/quadro3.png" width="136" height="135" />','<img src="images/quadro4.png" width="136" height="135" />', '<img src="images/quadro5.png" width="136" height="135" />', '<img src="images/quadro6.png" width="136" height="135" />', '<img src="images/quadro7.png" width="136" height="135" />', '<img src="images/quadro8.png" width="136" height="135" />', '<img src="images/quadro9.png" width="136" height="135" />'];
        for ( var i=1; i<=words.length; i++ ) {
          $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
            accept: '#cardPile div',
            hoverClass: 'hovered',
            drop: handleCardDrop
          } );
        }
       
      }

      function handleCardDrop( event, ui ) {
        var slotNumber = $(this).data( 'number' );
        var cardNumber = ui.draggable.data( 'number' );
        // If the card was dropped to the correct slot,
        // change the card colour, position it directly
        // on top of the slot, and prevent it being dragged
        // again
       
        if ( slotNumber == cardNumber ) {
       /*
       if(slotNumber==1){
        $('#message').show().html("SLA works by curing and solidify successive layers of liquid photopolymer resin using an ultraviolet laser.");
        } 
        if(slotNumber==2){
        $('#message').show().html("Selective Laser Sintering is similar to SLA, but instead of liquid resin, powdered materials including nylon, ceramics, glass, aluminum, to steel or silver can be used.");
        } 
        if(slotNumber==3){
        $('#message').show().html("Chuck Hull founds 3D systems, which develops its first commercial 3D printer, the Stereolithography Apparatus (or SLA-1)");
        } 
        if(slotNumber==4){
        $('#message').show().html("Fused Deposition Modeling heats and extrudes thermoplastic filament, depositing layers of semi-liquid beads along an STL-defined extrusion path.");
           } 
        if(slotNumber==5){
        $('#message').show().html("Scott Crump founds Stratasys");
        } 
        if(slotNumber==6){
        $('#message').show().html("Four Selective Laser Sintering machines were built, but none were ever sold. Each cost $300,000-$400,000.");
        } 
        if(slotNumber==7){
        $('#message').show().html("LOM bonds and cuts sheet material using a digitally guided laser.");
        } 
        if(slotNumber==8){
        $('#message').show().html("MIT's Three Dimensional Printing (3DP) spreads a thin layer of powdered material on a flat bed, solidifying successive layers with fine jets of binding agent. MIT licenses it technology to several companies including ZCorp.");
        } 
        if(slotNumber==9){
        $('#message').show().html("Anthony Atala, director of the Institute for Regenerative Medicine at Wake Forest University School of Medicine, leads a research team that successfully implants a lab-grown bladder into a human patient. The organ is built by seeding a 3D-printed scaffold with bladder cells.");
        } 
        if(slotNumber==10){
        $('#message').show().html("The aim of the RepRap (Replicating Rapid Prototyper) project is is to create a Fused Filament Fabrication (FFF) 3D printer that can print most of its own components. FFF instead of FDM is chosen to describe the process in order to avoid legal issues with Stratasys.");
        } 
        if(slotNumber==11){
        $('#message').show().html("Thingiverse was started in November 2008 by Zach \"Hoeken\" Smith as a companion site to MakerBot Industries, a DIY 3D printer kit making company.");
        } 
        if(slotNumber==12){
        $('#message').show().html("The project comes out of Cornell's Fab@Home venture, headed up by associate professor Hod Lipson. Started in 2005, the project aims to create do-it-yourself versions of machines that can manufacture custom objects on-demand. The group started experimenting with food fabrication in 2007.");  
        } 
        */
        
        animateMessage();
          ui.draggable.addClass( 'correct' );
          ui.draggable.draggable( 'disable' );
          $(this).droppable( 'disable' );
          ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
          ui.draggable.draggable( 'option', 'revert', false );
          correctCards++;
          
        } 
         
        // If all the cards have been placed correctly then display a message
        // and reset the cards for another go
       
        if ( correctCards == 9 ) {
          $('#successMessage').show();
          $('#successMessage').animate( {
            left: '700px',
            top: '350px',
            width: '300px',
            height: '60px',
            opacity: 1
          } );
        }
       
      }
      function hideMessage(){
      $('#message').animate( 
          {
            left: '220px',
            top: '700px',
            width: '600px',
            height: '100px',
            opacity: 0
          });
      }
      function animateMessage(){
      $('#message').animate( 
          {
            left: '220px',
            top: '700px',
            width: '600px',
            height: '100px',
            opacity: 1
          });
           
           }
      //-->
          </script>
          
      </head>
      <body class="thrColFixHdr">
      <!-- begin address  -->
      <div id="container"><!-- end address  --> 
      <!-- begin title  --><!-- end title, end ghetto code  -->
      <!-- begin sidebar 1  -->
       <!-- <div id="sidebar1">
          <p></p>
      </div>-->
      <!-- end #sidebar1 -->
      <!-- begin #sidebar2 --><!-- end #sidebar2 -->
      <!-- begin #maincontent -->  
        <div id="mainContent">
       <!--Game-->
        <div id="part1" style="display:block;">
          <div id="gameContent">
            
            <div id="cardPile">        </div>
        <div id="cardSlots"> </div>
       <div id="message"></div>
        <div id="successMessage">
          <span style="font-weight:bold;font-size:2em;">Parabéns! Você acertou todos!</span><br><br>
          <button onclick="gameInit()">Jogar Novamente</button>
        </div>
       
      </div>
          <ol class="instructions">
          </ol>
        </div>
          <div></div>
          
      </div>
          <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <!-- end #container --></div>
      </body>
      </html>
    • Viriato
      o que preciso estudar pra fazer isso?
      Por Viriato
      Preciso Montar uma ferramenta pro meu site da seguinte forma:
       
      A pessoa entra na página e tem Várias imagens na tela, então ela escolhe uma e arrasta até uma barra na direita
      Quando a pessoa largar a imagem na direita, ela tem que ficar menor e alinhada lá em cima.
      Além disso, no final eu preciso passar essas informações da escolha para uma outra página, pra fazer um resumo do que ela escolheu
       
      Me ajudem ai dizendo o que tenho que pesquisar pra começar isso, já dei uma lida em algumas bibliotecas de Drag and Drop mas não sei como implementa-las
      Agradeço desde já!!
    • biarritzzz
      Uso da ferramenta drag and drop com imagens em página em branco do tum
      Por biarritzzz
      oi, gente. primeiramente queria saber de quem usa tumblr se as páginas criadas sob o seu domínio e em "custom layout" suportam mesmo qualquer código.
      se sim, alguém pode me ajudar a usar a ferramenta drag and drop com imagens? para arrastar e colocar em qualquer lugar, muito usado pra jogos simples etc.
      se não, por favor me indiquem uma plataforma (MUITO antigamente usava o falecido geocities pra isso) que suporta tal código?
       
      tenho feito isso:
      <div id="drag-1" class="draggable"> <img src="http://d1v8u1ev1s9e4n.cloudfront.net/55a7fa9a067d7b6ebe9795c7"/> </div> coisa que vi por aí tanto em sites quanto em tutoriais, mas não tá funcionando lá. alguém pode me ajudar? obg!!!
×

Informação importante

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

  Aceito