Jump to content
MachineMan

Como programo um botão para inserir uma foto?

Recommended Posts

Quero inserir um botão "Inserir uma Foto" e quero que em seguida, depois de clicar no botão, a foto apareça em cima dele, como se houvesse inserido, não precisa funcionar 100%, não precisa guardar a informação, etc...

 

(Não acho que seja necessário o código nesse caso, até pq é uma parte separada) Obrigado! :thumbsup:

Share this post


Link to post
Share on other sites

É sim necessario codigo Javascript já que o que você está querendo é uma funcionalidade e não uma alteração na camada de apresentação, Html te proporcionam recursos para esse fim mais a manipulação desses dados é inpossivel ser feito sem código, acredito seu topico está na area errada do forum deveria ser em "Javascript afinal", em nenhuma parte da sua dúvida vi algo relacionado ao layout mas sim manipulação de dados.

 

dá uma olhada nesse codigo:

JsBin: https://jsbin.com/qoyucowuze/edit?html,css,js,output

Share this post


Link to post
Share on other sites
2 minutos atrás, wanderval disse:

É sim necessario codigo Javascript já que o que você está querendo é uma funcionalidade e não uma alteração na camada de apresentação, Html te proporcionam recursos para esse fim mais a manipulação desses dados é inpossivel ser feito sem código, acredito seu topico está na area errada do forum deveria ser em "Javascript afinal", em nenhuma parte da sua dúvida vi algo relacionado ao layout mas sim manipulação de dados.

 

dá uma olhada nesse codigo:

JsBin: https://jsbin.com/qoyucowuze/edit?html,css,js,output

Ah sim, obrigado pela ajuda!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By b2black
      Estava vendo para atualizar o Windows pro 11, e notei isso no site da Microsoft, alguém sabe qual repositorio, ou como pesquisar para desenvolver algo similar?
      Quando você rola a página, o menu fica transparente.
       
      Explore Windows 11 OS, Computers, Apps, & More | Microsoft
    • By viniciusfroner
      Bom dia, quero fazer um botão onde ao der o click pelo pc leve a uma página de contato para o whatsapp e pelo celular leve o número de contato a discagem direta.
      Procurei em alguns lugares mas o método de implementação que encontrei dependeria de codigos javascript que pra mim ainda são muito complexos, como por exemplo:
       
      function detectar_mobile() { var check = false; //wrapper no check (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } <a href="" class="get-started-btn scrollto">Ligue para nós</a>  
    • By klasss
      Olá a todos, 

      Gostaria de saber se alguem conhece um layout para efetuar o registo de folha de ponto. 

      Algo do género :  Mês - Dias do mês em questão - Possibilidade de colocar as horas trabalhadas. 

      Deixo uma imagem de exemplo. 
      Obrigado!
       

    • By Air-Gear
      Olá, na parte de enviar eu conseguir, mas manter até terminar o cadastro eu não conseguir. Eu vou contar toda a história para ficar mais claro possível.
       
      Eu precisei implementar um Upload de qualquer imagem ou PDF na página de solicitar compras. O site utiliza AngularJS, a primeira versão do Angular. Eu tentei fazer sem depender de PHP, mas na internet achava só a parte de Front-End e ninguém sabia fazer no Back-End. Então eu resolvi fazer com PHP mesmo.
       
      Nó código PHP, ele aceita todos as extensões de imagens mais o PDF e é possível envia-los todos de uma vez na quantidade que quiser. Todos os arquivos serão renomeados, contendo no nome o ID do usuário logado pego pela função javascript, o dia do mês, o mês, o ano, o dia da semana, a hora, o minuto, o segundo, se é AM ou PM e uma numeração aleatório. O arquivo PDF vai continuar sendo PDF e todas as imagens serão JPG. No final, todos serão enviados para uma pasta chamada upload.
       
      Só que agora eu preciso jogar de volta para página para salvar os novos nomes dos arquivos para continuar o cadastro da solicitação de compras. Como AngularJS utiliza Javascript, eu tentei usa-lo dentro do PHP utilizando EOF, mas não tive resultado. Eu só consigo com HTML com as diretivas do AngularJS. Na parte do API, nos atributos, eu declarei "nomeArquivo: []," , para salvar os nomes dos arquivos.
       
      Seguem o código.
      <div class="row"> <div class="col-sm-12 col-md-6 "> <div class="upload_form_cont"> <form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload"> <div> <div><label for="image_file">Selecione o arquivo de imagem</label></div> <div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div> </div> <div> <input type="button" value="Upload" onclick="startUploading()" /> </div> <div id="fileinfo"> <div id="filename"></div> <div id="filesize"></div> <div id="filetype"></div> <div id="filedim"></div> </div> <div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div> <div id="error2">Ocorreu um erro ao enviar o arquivo</div> <div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div> <div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div> <div id="progress_info"> <div id="progress"></div> <div id="progress_percent">&nbsp;</div> <div class="clear_both"></div> <div> <div id="speed">&nbsp;</div> <div id="remaining">&nbsp;</div> <div id="b_transfered">&nbsp;</div> <div class="clear_both"></div> </div> <div id="upload_response"></div> </div> </form> </div> </div> </div> upload.php
      <?php function bytesToSize1024($bytes, $precision = 2) { $unit = array('B','KB','MB'); return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; } //Pega o id do usuário logado $id_url = $_GET['id']; // Numero de campos de upload $numeroCampos = count($_FILES['image_file']['name']); // Tamanho máximo do arquivo (em bytes) $tamanhoMaximo = 1024*1024*2; // Extensões aceitas $extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff"); //Local da pasta $_UP['pasta'] = '../upload/'; $substituir = false; for ($i = 0; $i < $numeroCampos; $i++) { // Informações do arquivo enviado $sFileName = $_FILES['image_file']['name'][$i]; $sSize = $_FILES['image_file']['size'][$i]; $sFileSize = bytesToSize1024($sSize, 1); $nomeTemporario = $_FILES['image_file']['tmp_name'][$i]; // Verifica se o arquivo foi colocado no campo if (!empty($sFileName)) { $erro = false; // Verifica se o tamanho do arquivo é maior que o permitido if ($sSize > $tamanhoMaximo) { $erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes"; } // Verifica se a extensão está entre as aceitas elseif (!in_array(strrchr($sFileName, "."), $extensoes)) { $erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida"; } // Verifica se o arquivo existe e se é para substituir elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) { $erro = "O arquivo <b>" . $sFileName . "</b> já existe"; } else{ //Pega a extensão do arquivo $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION); // O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta // Primeiro verifica se deve trocar o nome do arquivo $unixTime = time(); $timeZone = new \DateTimeZone('America/Sao_Paulo'); $time = new \DateTime(); $time->setTimestamp($unixTime)->setTimezone($timeZone); $formattedTime = $time->format('d-m-Y_l_h-i-s-a'); $aleatorio = rand(); if($TipoExtensao == 'pdf'){ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf'; }else{ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg'; } // Depois verifica se é possível mover o arquivo para a pasta escolhida if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) { // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!"; echo "</br>"; echo<<<EOF <p>Eu tentei implementar o retorno da página aqui!</p> <p></br></p> <p></br></p> EOF; } else { // Não foi possível fazer o upload, provavelmente a pasta está incorreta echo "Não foi possível enviar o arquivo, tente novamente"; echo "</br>"; } } } else { echo "Selecione algum arquivo de imagem ou PDF para fazero upload."; } } ?>  
    • By mateus.andriollo
      Estou preocupado com as opções dos navegadores que permitem, por exemplo, alterar para ativo um input que estava "disable" e alterar seu value de 10 para 500.
       
      Como bloquear este tipo de ação?
      Uso PHP como back-end e passo meus dados via dados via PDO.
       
      Existe uma maneira de criptografar ou mesmo criar uma regra que valide meus dados?
       
       
×

Important Information

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