Ir para conteúdo

POWERED BY:

Arquivado

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

MSA_GT

Selecionar arquivo e enviar no mesmo botão

Por , em Javascript

Recommended Posts

MSA_GT    0

MSA_GT
Postado

 

Quero deixar invisivel um input-file e chama-lo por um button, se for selecionado um arquivo ele faz o Submit, meu problema esta bem quando eu seleciono ele mostra o nome do arquivo no file (em modo visivel) e antes de fazer o submit ele apaga, quando carrega o upload da erro pois não foi nenhum arquivo.

 

<!doctype html>
<head>
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<style>
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<form id="frmAnexo" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" size="60" id="inpFile" name="inpFile">
     <input type="button" id="btnAnexar" class="anexo" value="Ajax File Upload">
</form>
<div id="progress">
    <div id="bar"></div>
    <div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function(){
	$('#btnAnexar').click(function() {
		$('#inpFile').trigger('click');
	});
	$('#xinpFile').change(function(){
		if ($('#inpFile').val()!=''){
			$('#frmAnexo').trigger('submit');
			}else{
				alert('Selecione um arquivo');
				}
		})
	var options = { 
    beforeSend: function() {
    	$("#progress").show();
    	//clear everything
    	$("#bar").width('0%');
    	$("#message").html("");
		$("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete){
    	$("#bar").width(percentComplete+'%');
    	$("#percent").html(percentComplete+'%');

    },
    success: function() {
        $("#bar").width('100%');
    	$("#percent").html('100%');
    },
	complete: function(response){
		$("#message").html("<font color='green'>"+response.responseText+"</font>");
	},
	error: function(){
		$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
	}
}; 
$("#frmAnexo").ajaxForm(options);
});
</script>
</body>
</html>

 

Toda vez que uso a função pra chamar o File e depois o Submit ele apaga o nome do file e nao envia nada...

 

Bom espero q alguém me ajude !!!

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ajax não envia arquivo

Compartilhar este post

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

Informação importante

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

  Aceito