Ir para conteúdo
lucas70770

Evento ao cancelar Input File com Jquery

Recommended Posts

Olá, estou trabalhando com uma pagina de update e quero que ocorra um evento quando meu input file for cancelado, especificadamente quando ele ainda esta vazio e é aberto para seleção do arquivo e assim cancelado. Quero que dispare um evento de preferencia em Jquery.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não conheço nenhum evento que consiga monitorar o 'cancel' (até pq naquele momento é uma comunicação do browser x S.O.)

 

Você poderia Monitorar o evento 'click', e esperar ocorrer um evento 'change' no value...

A questão é quando isso vai ocorrer?,  já que o usuário pode demorar a cancelar/selecionar o arquivo e confirmar :( 

 

Ai pensando bem... poderia ocorrer um callback de tempos em tempos checando até a janela voltar a ter 'focus' haha.

 

Alguma coisa maluca assim:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<form method="post" action="recebe.php" enctype="multipart/form-data">
		<p>Arquivo:</p>
		<input type="file" name="arquivo" id="arquivo" />
		
		<hr />
		<span id="status">Esperando o Click</span>
		<br />
		<span id="focaNoTrabalho"></span>
	
		<input type="submit" value="Enviar" />
	</form>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script type="text/javascript">
	
	
		
		$(document).ready(function() {
			
			var window_focus;

			
			$(window).focus(function() {
				window_focus = true;
			}).blur(function() {
				window_focus = false;
			});
			
			$( "#arquivo" ).bind( "click", function() {
			
				//console.log('val->', );
				var loopFocus = setInterval(function() {
					if(window_focus){
						//$( "#focaNoTrabalho" ).text("Focado!");
						clearInterval(loopFocus);
						
						if($( "#arquivo" ).val() == ''){
							alert('Pq cancelou?!');
						}
					}
				}, 500);
			});
		});
		
	
	</script>
</body>
</html>

Live Demo:

https://fiddle.jshell.net/sLxg8s00/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por fernando56736454563
      cloneform = $('#dadosbanco').html(); $(document).on('click','.remDiv, .addDiv', function(e){ thisClass = e.target.className; thisClass == 'remDiv' ? ($('.'+thisClass).length > 1 ? $(this).closest('.remove').prev().add($(this).closest('.remove')).remove() : 0) : $('#dadosbanco').append(cloneform); }); var counter = 1; function addInput(divName, template) { if (counter == 5) { document.getElementById("add_more_text").remove(); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = document.getElementById(divName).innerHTML; newdiv.className = 'added'; document.getElementById(template).appendChild(newdiv); counter++; } var selectElements = document.querySelectorAll('select'); for (var i = 0; i < selectElements.length; i++) { selectElements[i].id = 'id-' + i; selectElements[i].name = 'category' + i; } } function removeInput(obj) { if (obj.parentNode.className == 'added') { obj.parentNode.parentNode.removeChild(obj.parentNode); counter--; } } <input type="button" value="Adicionar Componente" class="addDiv"/> <div id="dadosbanco"> <div class="remove"> <div id="template"> <input type="text" name=""> <a href="javascript:void(0)" onClick="removeInput(this);">x</a> </div> <div id="add_more"></div> <a href="javascript:void(0)" onClick="addInput('template', 'add_more');" id="add_more_text">+ Add more</a> </div> <div class="remove"> <input type="button" value="Remover Componente" class="remDiv" /> </div> </div> Sempre que faço a clonagem da div id dadosbanco, quando clico para clonar a div de id template ele aparece na minha clonagem original da primeira div de id template
    • Por Soneca_BO
      Boa tarde Pessoal!
       
      Estou a um bom tempo tetando fazer um CRUD em um banco de dados não tradicional e sim do "Cognos tm1",
       
      Estou fazendo uma aplicação WEB e queria usar o Ajax com jquery e javascript(dependendo do caso) para fazer um CRUD
      salvando dados deletando e fazendo as devidas atualizações, mas não estou conseguindo fazer o "PUT" e nem o "DELETE", 
      E não faço ideia de como começar a escrever o código para os métodos informados acima.
       
      Segue código criado para fazer o GET (só conseguir fazer o GET)
      $.ajax({ username: 'admin', password: ' ', url: "http://localhost:8881/api/v1/Cubes('ACO.200.Despesas')/Views('visao')/tm1.Execute?$expand=Cube($select=Name;$expand=Dimensions($select=Name)),Axes($expand=Tuples($expand=Members($select=Name;$expand=Element($select=UniqueName)))),Cells", method: 'POST', headers: { "Authorization": "Basic YWRtaW46", "cache-control": "no-cache", }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); }, error: function () { alert("erro"); } });  
       
      Obs.: não sou muito bom em rest e estou buscando aprender mais sobre ele, se alguém poder me ajudar agradeceria muito.
       
      Desde já agradeço alguém que conseguir me da uma força.
       
    • Por marco.prado
      Olá caros, bom dia.
      Alguém consegue me dar uma luz de como consigo disparar um evento pós click numa home e manter o mesmo ativo nas demais páginas do site?

      Segue o jquery:
      $('#btnAcess').on('click', function() {
        $('body').toggleClass("Acess");
      });

      Como vocês podem ver, esse código insere uma(Class="Acess") dentro da tag <body> e é isso que eu quero que de alguma forma se mantenha nas outras páginas durante a navegação, disparado por apenas um click feito no botão que possui o (id="#btnAcess").
       
      Desde já obrigado. 
×

Informação importante

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