Orientacion para subir imágenes con Ajax a MySQL

[Kilofafeure]

Buenas, estoy haciendo un programa que me permita subir datos a mi BBDD, entre los datos que quiero subir tengo un archivo de audio y una imagen, bien mi problema reside en que he encontrado como subirlo directamente con un archivo php, pero yo hago un paso intermedio con Ajax, de manera que pueda subir muchos datos a la vez (Ajax + POO + php). Me explico, yo utilizo Ajax para que cada se me vayan mostrando los datos a subir en un grid y cuando tengo todos los datos que quiero subir darle a un submit para que me los introduzca todos en mi BBDD, para hacer esto utilizo una tabla intermedia, que es la que me muestra lo introducido hasta el momento. Bien el problema es que no consigo hacer las comprobaciones necesarias así como de transformación de los archivos para poder subirlos en BLOB primero a la tabla y luego subirlos a la BBDD.

He pensado en tratar las imagenes en registro.php para luego pasar las variables creadas a la funcion crear y alli introducir en la tabla intermedia, el problema que tengo es que para tratar la imagen se utiliza $_FILES y no se como pasarlo des de el html...es decir no se como cogerlo ya que no estoy en el php al que le se hace la llamada, ya que se llega des de una llamada en javascript.

Tratamiento imagenes, aquí tengo el problema, no se como acceder al archivo.

Código PHP:

    $name = $_FILES["foto"]["name"];
  $type = $_FILES["foto"]["type"];
  $tmp_name = $_FILES["foto"]["tmp_name"];
  $size = $_FILES["foto"]["size"];  
   

El proceso seria:

FORMULARIO HTML --> JAVASCRIPT/AJAX: Comprueba() -> enviarDatosCompra() --> PHP/POO: registro.php -> crear()

¿Me podría orientar alguien de como hacerlo o alguna otra manera? le llevo tiempo dando vueltas y no consigo hacerlo... Muchas gracias!


FORMULARIO

Código HTML:

<FORM ID="formIMArticulo" NAME="formIMArticulo" method="post" onSubmit="comprobar();return false;">
  		<TR>
		<TD align="left" width="100">Artista:</TD>
		<TD align="left" width="150"><INPUT TYPE="text" NAME="Artista" MAXLENGTH="30" SIZE="10" onChange="javascript:this.value=this.value.toUpperCase();"></TD>
		</TR>
		<TR>
		<TD align="left" width="100">Disco:</TD>
		<TD align="left" width="150"><INPUT TYPE="text" NAME="Disco" MAXLENGTH="30" SIZE="10" nChange="javascript:this.value=this.value.toUpperCase();"> </TD>
		</TR>
		<TR>
		<TD align="left" width="100">Imagen:</TD>
		<TD align="left" width="150"><input type="file" id="foto" name="Imagen" onBlur="LimitAttach(this,1);"/>
		</TD>
		</TR>
		<TR>
		<TD align="left" width="100">Sample:</TD>
		<TD align="left" width="150"><input type="file" id="sample" name="MP3" onBlur="LimitAttach(this,2);"/>
		</TD>
		</TR>
		<TD>        
		<input type="submit" NAME="btnIntroducir" value="Introducir Artículo"><!--Este sólo introduce en la tabla-->
        <INPUT type="reset" value="Limpiar Campos" name="Limpiar" onClick="ponerfoco(0,0)">
		</TD>
		</TR>
	</FORM>
	<tr>
    <td><div id="resultado"><?php include('./IntroArticulo/consulta.php');?></div></td> <!-- carga los datos de la tabla intermedia y los muestra -->
	</tr>

	<form name="formIntroArticulo" action="./IntroArticulo/iarticulo.php" method="post">
		<tr>
		<td>
        <INPUT type="submit" name="boton2" value="Guardar Artículos">	
   		<INPUT type="button" name="resetb" value="Limpiar Todo" onClick="location.href='./IntroArticulo/vaciararticulo.php';">
        </td>
    	</tr>
	</FORM> 

JAVASCRIPT --> llamada al Ajax des de comprueba (), comprueba () como su nombre indica que no esten los textbox vacios, si es así llama a la función enviarDatosCompra()

Código:

function enviarDatosCompra(){
  //donde se mostrará lo resultados
  divResultado = document.getElementById('resultado');
  divResultado.innerHTML= '<img src="../imagenes/anim.gif">';
  //valores de las cajas de texto
  art=document.formIMArticulo.Artista.value;
  dis=document.formIMArticulo.Disco.value;
  ima=document.formIMArticulo.Imagen.value;
  mp3=document.formIMArticulo.MP3.value;
  //instanciamos el objetoAjax
  ajax=objetoAjax();
  //uso del medoto POST
  //archivo que realizará la operacion
  //registro.php
  ajax.open("POST", "./IntroArticulo/registro.php",true);
  ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
  //mostrar resultados en esta capa
  divResultado.innerHTML = ajax.responseText
  //llamar a funcion para limpiar los inputs
  Limpiar();
  }
  }
  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  //enviando los valores
  ajax.send("Artista="+art+"&Disco="+dis+"&Imagen="+ima+"&MP3="+mp3)
}

registro.php

Código PHP:

  <?php
include_once("cEmpleado.php");

//variables POST

$art=$_POST['Artista'];
$dis=$_POST['Disco'];
$ima=$_POST['Imagen'];
$mp3=$_POST['MP3'];
sleep(2);

//creamos el objeto $objempleados y usamos su método crear
$objempleados=new cEmpleado;
if ($objempleados->crear($art,$dis,$ima,$mp3)==true){  //La función crear es la que introduce en la tabla intermedia
    echo "Registro grabado correctamente";
}else{
    echo "Error de grabacion el artículo ya existe";
}
include('consulta.php');
?>   

[GatorV]

Hola Kilofafeure,

Te recomiendo leas las FAQ's del foro, actualmente no hay forma de enviar archivos vía AJAX, la única forma de hacerlo es con un iframe oculto, o mandando directo al formulario PHP.

Saludos.

[caricatos]

Iniciado por GatorV

Hola Kilofafeure,

Te recomiendo leas las FAQ's del foro, actualmente no hay forma de enviar archivos vía AJAX, la única forma de hacerlo es con un iframe oculto, o mandando directo al formulario PHP.

Saludos.

Cierto.

Fíjate que el encabezado que usas Content-type es el básico para el método POST: application/x-www-form-urlencoded, y el enctype de los formularios con ficheros adjuntos es sí o sí multipart/form-data... y aunque pudieras usar esa cabecera (tengo entendido que no) los datos que puedes enviar vía ajax deben encontrarse en la página, y con javascript no puedes acceder a el sistema de archivos del cliente...

La verdad es que podría decirse que se puede usar la tecnología ajax por la comunicación asincrónoca con el servidor, pero sin el objeto ajax (XMLHttpRequest/ActiveX), sino enviando un formulario a un iframe, y recibiendo esa respuesta asincrónica con el método load del iframe...

Échale un vistazo a este artículo: Revisar las imágenes antes de subirlas

Saludos

[Kilofafeure]

Gracias caricatos!!! es lo que necesitaba para poder hacerlo!!! por eso pedia si alguien me podía orientar porqué me parecía que no se podía hacer...muchas gracias...ahora mismo lo voy a probar.