Tabla con datos php en dos columnas!

[orw28]

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 donde pongo el link:

Código HTML:

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

La función fn_mostrar_frm_modificar:

Código Javascript:

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:

Código 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:

Código 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 no reconociendo la variable que me guarda la img.


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