Jquery form plugin file upload

Tengo un problema con el complemento de formulario jquery. Intento cargar un archivo de forma asíncrona pero no envía el formulario. marcado HTML y JavaScript de código son como a continuaciónJquery form plugin file upload

<form id="fileUploadForm" method="post" action="Default.aspx" enctype="multipart/form-data"> 
<input type="text" name="filename" /> 
<input type="file" id="postedFile" name="postedFile" /> 
<input type="button" value="Submit" onclick="UploadFile();" /> 
</form> 

$(document).ready(function() { 

     $('#fileUploadForm').ajaxForm();    
    }); 

function UploadFile() { 

     var options = 
     {     
      url:"Default.aspx",     
      beforeSend: ShowRequest, 
      success: SubmitSuccesfull, 
      error:AjaxError        
     };    
     $("#fileUploadForm").ajaxSubmit(options); 
     return false; 
    }.

tengo formar otra prueba de que sólo tiene un cuadro de texto en ella y funciona bien. También cuando comento el tipo de entrada = "archivo" ... la línea del formulario anterior funciona bien también. ¿Cuál es el problema con el archivo de tipo de entrada? ¿Alguna idea?

Fuente

2010-02-20 mehmet6parmak

En resumen:

<input type="file" />

no se pueden enviar a través de AJAX, que tiene que ser una devolución de datos completa. Tradicionalmente se usa un iFrame para esto si se quiere un comportamiento de estilo AJAX. He usado algunas soluciones para esto, sin saber en qué plataforma estás, SWFUpload suele ser una buena opción.

Aquí está un ejemplo de documento lleno de una solución:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="Javascript/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="Javascript/jquery.form.js"></script> 
    <script type="text/javascript"> 
     $(function() {    
      $('#fileUploadForm').ajaxForm({     
      beforeSubmit: ShowRequest, 
      success: SubmitSuccesful, 
      error: AjaxError        
      });          
     });    

     function ShowRequest(formData, jqForm, options) { 
      var queryString = $.param(formData); 
      alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString); 
      return true; 
     } 

     function AjaxError() { 
      alert("An AJAX error occured."); 
     } 

     function SubmitSuccesful(responseText, statusText) {   
      alert("SuccesMethod:\n\n" + responseText); 
     }  
    </script> 
</head> 
<body> 
    <form id="fileUploadForm" method="POST" action="Default.aspx" enctype="multipart/form-data"> 
     <input type="text" name="filename" /> 
     <input type="file" id="postedFile" name="postedFile" /> 
     <input type="submit" value="Submit" /> 
    </form> 
</body> 
</html>

Fuente

2010-02-20 13:38:11

Gracias por su respuesta podrías comprobar a continuación http://jquery.malsup.com/form/#file-upload am el enlace lo estoy malinterpretando? – mehmet6parmak

@mehmet6parmak - Se agregó la alternativa anterior, pruébala, mira si todavía tienes problemas. ¿Estás usando FireBug o algo así para ver si se está produciendo alguna acción/error? –

No usé Firebug pero lo depuré en Visual Studio sin embargo no pude entender lo que está sucediendo dentro de jquery (de hecho, como mencionaste anteriormente crea un iframe, eso es lo único que entendí =)). Intenté usar el manejador de errores de jquery pero ese método nunca se ejecutó. Si encuentro el problema, lo escribiré aquí gracias de nuevo por su interés. – mehmet6parmak

Respuesta

Cuestiones relacionadas