Botão para selcionar arquivo e chamar Upload-PHP

MSA_GT · Setembro 26, 2013

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>

Bom espero q alguém me ajude !!!

Editado Setembro 26, 2013 por MSA_GT

Carlos Azevedo Santos · Dezembro 30, 2016

Boa tarde amigo, gostaria de saber se já sanou a sua dúvida estou tentando fazer a mesma coisa, porém sem o botao de ingresso.

Entrar

Botão para selcionar arquivo e chamar Upload-PHP

Pergunta

MSA_GT

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Carlos Azevedo Santos

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades