¿Cómo guardar imágenes en Mysql con ajax y php?

Hola! Tengo un código de un formulario para guardar info en Mysql, y funciona perfecto con input tipo texto, pero cuando necesito subir también una imagen, deja de funcionar. Estoy comenzado a usar ajax y tengo muy poco conocimiento al respecto. Espero me puedan ayudar por favor!

Este es mi formulario:

<table id="grilla" class="lista" width="690">
<tr>
<td><a href="javascript: fn_mostrar_frm_modificar(<?=$rs_per['id']?>);"><img src="../images/page_edit.png" /></a></td>
</tr>

</table>

La función fn_mostrar_frm_modificar:

function fn_mostrar_frm_modificar(id){
$("#div_oculto").load("ajax_form_modificar.php", {id: id}, function(){
$.blockUI({
message: $('#div_oculto'),
css:{
top: '20%'
}
});
});
};

El ajax_form_modificar.php:

<p>Por favor edite los datos necesarios:</p>
<form action="javascript: fn_modificar();" method="post" name="frm_per" id="frm_per">
<input type="hidden" id="id" name="id" value="<?=$rs_per['id']?>" />
<table class="formulario">
<tbody>
<tr>
<td>Nombre:</td>
<td><input name="nombre" type="text" id="nombre" size="40" class="requisssred" value="<?=$rs_per['nombre_produc']?>" /></td>
</tr>
<tr>
<td>Cantidad Disponible:</td>
<td><input name="stock" type="text" id="stock" size="40" class="required" value="<?=$rs_per['cant_disponible']?>" /></td>
</tr>
<tr>
<tr>
<td>Imagen:</td>
<td><input name="imagen" type="file" id="imagen" size="30"/></td>
</tr>
<tr>
<td>Banner:</td>
<td><input name="img2" type="file" id="img2" size="30"/></td>
</tr>
<tr>
<td>Precio:</td>
<td><input name="precio" type="text" id="precio" size="30" value="<?=$rs_per['precio']?>" /></td>
</tr>
<tr>
<td>Categoría:</td>
<td> <?php generaCategorias(); ?> </td>
</tr>
<tr>
<td>Subcategoría:</td>
<td><select disabled="disabled" name="subcat" id="subcat" class="required">
<option value="0">Selecciona opci&oacute;n...</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input name="modificar" type="submit" id="modificar" value="Modificar" />
<input name="cancelar" type="button" id="cancelar" value="Cancelar" onclick="fn_cerrar();" />
</td>
</tr>
</tfoot>
</table>
</form>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#frm_per").validate({
submitHandler: function(form) {
var respuesta = confirm('\xBFDesea realmente modificar los datos?')
if (respuesta)
form.submit();
}
});
});
function fn_modificar(){
var str = $("#frm_per").serialize();
$.ajax({
url: 'ajax_modificar.php',
data: str,
type: 'post',
success: function(data){
if(data != "")
alert(data);
fn_cerrar();
fn_buscar();
}
});
};
</script>

Y EL AJAX_MODIFICAR.PHP:

<?
include "conexión.php";
include "básico.php";
/*verificamos si las variables se envían*/
if(empty($_POST['nombre']) || empty($_POST['stock']) || empty($_POST['imagen']) || empty($_POST['img2']) || empty($_POST['precio']) || empty($_POST['category']) || empty($_POST['subcat'])){
echo "Usted no ha llenado todos los campos";
exit;
}
$id=$_POST['id'];
/*modificar el registro*/
$sql= "UPDATE productos SET nombre_produc='$_POST[nombre]', cant_disponible='$_POST[stock]', imagen='$_POST[imagen]', precio='$_POST[precio]', id_categoria='$_POST[category]', id_subcategoria='$_POST[subcat]', banner='$_POST[img2]' WHERE id='$id'";
$result=mysql_query($sql);
if(!mysql_query($sql))
echo "Error al editar los datos\n$sql";
exit;
?>

Cuando el codigo verifica si se envían las variables, SIEMPRE ME DICE que los campos no se han llenado, pero si pongo ese codigo en comentario SI me edita los datos, peeeero: No me guarda las imgs en la BD Y me muestra un mensaje con mucho codigo loco.

Espero me puedan ayudar porfavor ya que el detalle de las imgenes es lo unico q me hace falta. GRACIAS!!

Añade tu respuesta

Haz clic para o