subir imagen con ajax en dialogo jquery ui

[trevol]

Hola amigos trato de subir imagen además de otros datos por mediacion de ajax usando jquery ui y no me sube la imagen se bloquea en el botón que le creé de guardar.

este es mi ajax jquery ui

Código Javascript:

$( "#anadir" ).dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
 
    buttons: {
    "guardar": function() {     
        var formData = new FormData($("#formularioanadir")[4]);
        $.get("peli.php", {
            titulo : $("#atitulo").val() ,
            director : $("#adirector").val() ,
            fecha: $("#afecha").val() ,
            idgenero: $("#agenero").val(),
            file : formData,
            operacion : "nuevo"
        },function(data,status){                
            $("#listar").html(data);
          
        })//get         
                
        $(this).dialog( "close" );                                              
                },
    "Cancelar": function() {
       
            $(this).dialog( "close" );
       
    }
 
 
    
    }//buttons*/
});         
//accion añadir pelicula
$(document).on("click","#anadirBoton",function(){
    $("#formularioanadir")[0].reset();
$( "#anadir").dialog("open");
}); //fin añadir pelicula
 

este es mi formulario

Código PHP:

<?php
require_once("conexion.php")
?>
    
 
<form id="formularioanadir" enctype="multipart/form-data">
titulo pelicula: <input type="text" id="atitulo" name="titulo"  value=""  required/><br>
director: <input type="text" id="adirector" value="" required /><br>
genero: <select id="agenero">
<?php
$consulta = "SELECT idGenero, genero
            FROM genero";
$res = $lnk->query($consulta);
while ($fila2 = $res->fetch_object()){?>
<option value="<?= $fila2->idGenero?>"><?= $fila2->genero?></option>
<?php } ?>
</select>
<br>
fecha:  <input type="text" id="afecha"  value="" required/>
<input type="file" name="file" value="subir archivo">
</form>
 

[mortiprogramador]

Saludo

¿Cuales versiones de jquery y de jquery ui estas usando?

En cuanto al código
¿#añadir es un div? no lo veo por ahí
¿guardar es un botón? tampoco lo veo

Finalmente, se agregan otras librerías?

Yo lo estructuré de este modo (agregue algunas a ciegas sin saber tus versiones)

Código HTML:

<script src="https://code.jquery.com/jquery-1.12.3.min.js" ></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js" ></script>
 
<script>
    $(document).ready(function(){
         
$( "#anadir" ).dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
 
    buttons: {
    "guardar": function() {     
        var formData = new FormData($("#formularioanadir")[4]);
        $.get("peli.php", {
            titulo : $("#atitulo").val() ,
            director : $("#adirector").val() ,
            fecha: $("#afecha").val() ,
            idgenero: $("#agenero").val(),
            file : formData,
            operacion : "nuevo"
        },function(data,status){                
            $("#listar").html(data);
          
        })//get         
                
        $(this).dialog( "close" );                                              
                },
    "Cancelar": function() {
       
            $(this).dialog( "close" );
       
    }
 
 
    
    }//buttons*/
});         
//accion añadir pelicula
$(document).on("click","#anadirBoton",function(){
    $("#formularioanadir")[0].reset();
$( "#anadir").dialog("open");
}); //fin añadir pelicula
 
       
    });
</script>
 
<?php
require_once("conexion.php")
?>
    
 
<form id="formularioanadir" enctype="multipart/form-data">
titulo pelicula: <input type="text" id="atitulo" name="titulo"  value=""  required/><br>
director: <input type="text" id="adirector" value="" required /><br>
genero: <select id="agenero">
<?php
$consulta = "SELECT idGenero, genero
            FROM genero";
$res = $lnk->query($consulta);
while ($fila2 = $res->fetch_object()){?>
<option value="<?= $fila2->idGenero?>"><?= $fila2->genero?></option>
<?php } ?>
</select>
<br>
fecha:  <input type="text" id="afecha"  value="" required/>
<input type="file" name="file" value="subir archivo">
</form>
 

Y me llama la atención la forma en que tienes organizados
los botones en el js, es a causa de jquery ui??
He mirado en la página de jquery ui, pero normalmente
llaman a las funciones de los botones en el modo clásico (es decir, teniendo en cuenta el id y asignandole el evento)

Ya me dirás