JQUERY/JS code explanation

Question

I needed to make an upload system, which when selecting the image, a preview would be shown in a box before it was sent. I saw a code here at Stackoverflow and I tried to adapt it. I would like to know if he is semantically correct, according to the language norms, and also, I would like an explanation about the code. (manjo de JQUERY/JS).

I thank everyone who helps :) 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>');
		  }
	});

Answer 1

In fact the code below receives the image input-image, validates if the type of the image is allowed, and performs the change of the image in the preview div of the same, the sending of the image via javascript needs to be done via POST (can be with ajax) here’s something I can help you implement: https://stackoverflow.com/questions/19447435/ajax-upload-image

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

If desired, you can do the POST normally through the HTML5’s own Submit action, and do the rest of the process with the backend language, it is a simpler way but 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>');
		  }
	});