Explanation of code JQUERY / JS

Question

Explanation of code JQUERY / JS

Navigation

#1 by (0 votes)

0

I needed to make an upload system, which when selecting the image, a preview would be shown in a box before being sent. I saw a code here in Stackoverflow and tried to adapt it. I would like to know if it is semantically correct, according to the language standards, and also, I would like an explanation on the code. (not JQUERY / JS mango).

Thank you all for helping :) Have a good weekend.

$('.arquivo').change(function(){
		  var preview = $('.enviar_screenshot button'); //BOTAO DE SELECIONAR ARQUIVO
		  var file    = $('.arquivo')[0].files[0]; // O ARQUIVO
		  var reader  = new FileReader(); 
		  var ext = ['jpg','jpeg','png']; // EXTENSÕES PERMITIDAS
		  var extArquivo = file.name.split(".").pop(); //PEGA A EXTENSÃO DO ARQUIVO

		  reader.onloadend = function () {

			  if(typeof ext.find(function(extt){return extArquivo == extt; }) == 'undefined') { // VERIFICA SE A EXTENSÃO NÃO É VÁLIDA, SE NÃO, REALIZA O PROCESSO NORMAL
	    	  	  $(preview).css({'background-image':'none', 'opacity':'1'});
		   		  $(preview).html('<i class="fas fa-plus"></i>');
	  		  } else {
	  		  	 $(preview).css({'background-image':'url(' + reader.result + ')', 'background-size':'cover', 'background-position':'center', 'opacity':'0.5'});
	  		  }

		   
		  }

		  if (file) { // MOSTRA
		    reader.readAsDataURL(file);
		    $(preview).text("");
		  } else {
		   $(preview).css({'background-image':'none', 'opacity':'1'});
		   $(preview).html('<i class="fas fa-plus"></i>');
		  }
	});

javascript jquery

asked by anonymous 30.06.2018 / 02:07

1 answer

Materialize label not working when inserted by Jquery NPM does not work after a while

score 0 · Accepted Answer

In fact the code below receives the image of the input-image, validated if the image type is allowed, and makes the image change in the preview div of the image, sending the image via javascript needs to be done via POST (can be with ajax) here is something that I can help you implement this: link

So basically, you just have to implement the POST method for the server, because the preview is already implemented.

If you want, you can do POST normally through the submit action of HTML5 itself, and do the rest of the process with the backend language, it's a simpler form but it may not suit well depending on your need.

$('.arquivo').change(function(){
		  var preview = $('.enviar_screenshot button'); //BOTAO DE SELECIONAR ARQUIVO
		  var file    = $('.arquivo')[0].files[0]; // O ARQUIVO
		  var reader  = new FileReader(); 
		  var ext = ['jpg','jpeg','png']; // EXTENSÕES PERMITIDAS
		  var extArquivo = file.name.split(".").pop(); //PEGA A EXTENSÃO DO ARQUIVO

		  reader.onloadend = function () {

			  if(typeof ext.find(function(extt){return extArquivo == extt; }) == 'undefined') { // VERIFICA SE A EXTENSÃO NÃO É VÁLIDA, SE NÃO, REALIZA O PROCESSO NORMAL
	    	  	  $(preview).css({'background-image':'none', 'opacity':'1'});
		   		  $(preview).html('<i class="fas fa-plus"></i>');
	  		  } else {
	  		  	 $(preview).css({'background-image':'url(' + reader.result + ')', 'background-size':'cover', 'background-position':'center', 'opacity':'0.5'});
	  		  }

		   
		  }

		  if (file) { // MOSTRA
		    reader.readAsDataURL(file);
		    $(preview).text("");
		  } else {
		   $(preview).css({'background-image':'none', 'opacity':'1'});
		   $(preview).html('<i class="fas fa-plus"></i>');
		  }
	});