Foros del Web » Programando para Internet » PHP »

Agregar INPUT para realizar UPLOAD de archivos php(ajax, jquery)

Estas en el tema de Agregar INPUT para realizar UPLOAD de archivos php(ajax, jquery) en el foro de PHP en Foros del Web. Hola, tengo un form y quería agregarle un campo para upload de archivo, he intentado de la manera que voy a colocar debajo pero sin ...
  #1 (permalink)  
Antiguo 08/06/2016, 23:35
 
Fecha de Ingreso: marzo-2014
Mensajes: 22
Antigüedad: 10 años
Puntos: 0
Pregunta Agregar INPUT para realizar UPLOAD de archivos php(ajax, jquery)

Hola, tengo un form y quería agregarle un campo para upload de archivo, he intentado de la manera que voy a colocar debajo pero sin resultado positivo. Si pueden darme una ayuda con esto, decirme que estoy haciendo mal.
Desde ya gracias!
index.php(hay mas campos pero acá coloco algunos)
Código HTML:
<form class="form-horizontal well" enctype="multipart/form-data" method="post">
				<div class="row">
					<div class="control-group">
						<label class="control-label" for="inputEmail"><span class="req">*</span>
							Email:</label>
						<div class="controls">
							<input name="email" type="text" id="email" />
						</div>
					</div>
				</div>
 
				<div class="row">
					<div class="control-group">
						<label class="control-label" for="inputEmail"><span class="req">*</span> Telefone:</label>
						<div class="controls">
							<input name="tel" type="text" id="tel" size="28"
								maxlength="50" />
						</div>
					</div>
				</div>
 
				<div class="row">
					<div class="control-group">
						<label class="control-label" for="inputEmail"><span class="req">*</span>Anexar arquivos:</label>
						<div class="controls">
								<input name="uploadedfile" id="uploadedfile" type="file" />
						</div>
					</div>
				</div>
 
				<div class="form-actions">
 
					<button type="button" onclick="sendFrmOrcamento();"
						class="custom-btn" id="enviar-botao">
						<div class="arrow-btn-icon pull-left"></div>
						Enviar
					</button>
				</div>
			</form> 
Aqui scrip incluido en el index

Código:
<script>
 
		$(".ui-corner-all").hover(function(){
			console.log("entrou");
		}, function(){
			console.log("saiu");
		});
 
		$('#cnl-btn').click(function(){
			if(confirm('Tem certeza que deseja desfazer o orçamento e voltar para a tela anterior?')) window.location = './'
		});
 
		$('#termo').change(function(){
			if(this.checked){
				$('#termo-compromisso span').removeClass('shown');
			}else{
				$('#termo-compromisso span').addClass('shown');
			}
		});
 
		function validaEmail(email){
			var str = email;
			var filtro = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
			return filtro.test(str) ;
		}
 
		/*$('#data').datepicker();*/
		var frm_send_orcamento = 0 ;
		function campos_validados_frm_orcamento () {
 
				var obj = new Object();
				obj.test = true;
				obj.msg = new Array();
 
				if ( $('#data').val().length <= 0 ) {
					obj.msg.push('Informe a data da mudança.');
					obj.test = false;
				}
 
				if ( $('#tel').val().length <= 0 ) {
					obj.msg.push('Informe o telefone.');
					obj.test = false;
				}
 
				if ( $('#est-origem').val().length <= 0 || $('#est-origem').val() == '--' ) {
					obj.msg.push('Selecione o estado de origem.');
					obj.test = false;
				}
 
				if ( $('#contato_mudanca_Torigem').val().length <= 0 || $('#contato_mudanca_Torigem').val() == '--' ) {
					obj.msg.push('Selecione o tipo de mudança origem.');
					obj.test = false;
				}
 
				if ( $('#cid-origem').val().length <= 0 || $('#cid-origem').val() == 'cidade' ) {
					obj.msg.push('Informe a cidade de origem.');
					obj.test = false;
				}
 
				if ( $('#est-destino').val().length <= 0 || $('#est-destino').val() == '--' ) {
					obj.msg.push('Selecione o estado de destino.');
					obj.test = false;
				}
 
				if ( $('#contato_mudanca_Tdestino').val().length <= 0 || $('#contato_mudanca_Tdestino').val() == '--' ) {
					obj.msg.push('Selecione o tipo de mudança destino.');
					obj.test = false;
				}
 
				if ( $('#cid-destino').val().length <= 0 || $('#cid-destino').val() == 'cidade' ) {
					obj.msg.push('Selecione a cidade de destino.');
					obj.test = false;
				}
 
 
				if ( $('#nome').val().length <= 0 ) {
					obj.msg.push('Preencha o campo nome.');
					obj.test = false;
				}
 
				if ( $('#email').val().length <= 0 || !validaEmail($('#email').val()) ) {
					obj.msg.push('Preencha o campo com um e-mail válido.');
					obj.test = false;
				}
 
				if(!$('#termo')[0].checked ){
					obj.msg.push('Para utilizar nossos serviços, você deve concordar com os Termos de Serviço do Mudanças Econômicas.');
					obj.test = false;
					$('#termo-compromisso span').addClass('shown');
				}
 
 
				/*
				if ( $('#info').val().length <= 0 || ($('#info').val()).toLowerCase() == 'informe aqui os itens a serem transportados'  ) {
					obj.msg.push('Informe aqui os itens a serem transportados');
					obj.test = false;
				} 
				*/
 
				return obj;
 
 
 
		}
 
		function sendFrmOrcamento(){
 
			if( frm_send_orcamento == 0){
 
				cv = new campos_validados_frm_orcamento();
 
				if ( cv.test == true ) {
 
					$('#enviar-botao')
					.addClass('disabled')
					.removeClass('btn-success')
					.text('Enviando formulário...');
 
						frm_send_orcamento = 1;
						$('#envia input').hide();
						$('#envia-aguarde').show();
						var btn = document.getElementById('uploadedfile')
						document.forms[0].append("uploadedfile", btn.files[0]);
						$.post( '../ajax/ajax_contato_send2.php' , $(document.forms[0]).serialize() , function(data){
 
							if(data){
								if(data.status == 0) {
									alert(data.msg);
								}else{
 
									$('#enviar-botao')
									.removeClass('disabled')
									.addClass('btn-success')
									.text('Enviar orçamento');
 
									window.location = 'ok.html' ;
								}
							}else{
								var msg = '';
								msg = 'Erro ao receber resposta do serviço de envio de dados, confira em seu e-mail ou entre em contato\n';
								msg += 'através do e-mail <?php echo $email_sistema; ?>';
								alert( msg );
							}
 
 
							$('#envia input').show();
							$('#envia-aguarde').hide();
 
							frm_send_orcamento = 0;
 
						},'json');
 
				}else{
					alert(cv.msg[0]);
				}
			}
		}
		function EmptyField(id)
		{
		        var Fid             = document.getElementById(id);
		        var TheDefaultValue = Fid.defaultValue;
		        var TheValue        = Fid.value;
		        if(TheDefaultValue == TheValue)
		        {
		                Fid.value = '';
		        }
		}
 
		//$('.form-horizontal select option:contains(SP)').attr('selected', true)
 
		</script>
ajax_contato_send2.php(solamente coloco la parte que intento subir el archivo, ya los demás campos si se envían)
Código PHP:
if(isset($_FILES['uploadedfile']['name'])){
        if (
$_FILES['uploadedfile']["error"] > 0){
            echo 
"Error: " $_FILES['uploadedfile']['error'] . "<br>";
        }else{
            
/*ahora co la funcion move_uploaded_file lo guardaremos en el destino que queramos*/
            
$target_path "uploads/";
            
$target_path $target_path basename$_FILES['uploadedfile']['name']);
            if(
move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
            }
        }
    } 
He probado el codig de upload y si funciona, lo único que no he podido ver es si realmente se envía el campo uploadedfile. Los archivos enviados de esta forma se reciben con la variable $_FILES? o existe otra?
Lesdejo los archivos completos aqui: [URL="https://my.pcloud.co...Mqa8Ofs4478qdh7"]https://my.pcloud.co...Mqa8Ofs4478qdh7[/URL].
Desde ya les agradezco.
  #2 (permalink)  
Antiguo 09/06/2016, 08:42
 
Fecha de Ingreso: diciembre-2015
Ubicación: México
Mensajes: 280
Antigüedad: 8 años, 4 meses
Puntos: 20
Respuesta: Agregar INPUT para realizar UPLOAD de archivos php(ajax, jquery)

Hola amig@,
La manera en que estás obteniendo $_FILES es la correcta, el único detalle que observo es a la hora de enviar el formulario, como lo estás haciendo mediante ajax/jquery y serializando tu form, debes agregar algunas configuraciones "extras" en tu $.post (contentType, processData)
Puedes buscar como enviar archivos mediante ajax de jquery
Saludos!

Etiquetas: html, input, select, upload, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:03.