¿Cómo subir un archivo a través de jQuery?

Question

Me pregunto cómo podría hacer esto con jQuery ajax. Ahora mismo tengo una ventana emergente del cuadro de diálogo jQuery ui y tiene un archivo de entrada html en ella.

Ahora cuando el usuario hace clic en importar, quiero hacer una publicación de AJAX en el servidor con jQuery.

No estoy seguro de cómo pasar el archivo a mi vista de acción.

En este momento tengo que hacer un post completo de nuevo, así que tengo este

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{%> 
    <br /> 
    <p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br /> 
    <p><input type="submit" value="Upload file" /></p>   

<% } %> 

Luego, en mi regulador

public ActionResult Import(HttpPostedFileBase file) 

Así que no estoy seguro de cómo pasar de una HttpPostedFileBase con jQuery y cómo establecer enctype = "multipart/form-data" en jQuery.

Editar

Ok así la forma plugin de jQuery parece ser el camino a seguir.

$('#frm_ImportCalendar').livequery(function() 
{ 
    var options = { 
     dataType: 'json', 
     success: function(response) 
     { 
      alert(response); 
     } 
    }; 

    $(this).ajaxForm(options); 
}); 

Me preguntaba por qué mi JSON no funcionaba pero alguien mencionó que no se puede utilizar simplemente como es. Estoy revisando el otro enlace donde alguien pudo usar json.

No estoy seguro por qué en Lck se usa .Submit antes del método de envío de AJAX.

Editar

¿Cómo podría cambiar el resultado JSON de carga de archivos para volver mi diccionario matriz?

 Dictionary<string, string> result = new Dictionary<string, string>(); 
     result.Add("Msg", "Success!!"); 
     result.Add("Body", calendarBody); 

// how can I change this? 
    return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } }; 

Answer 1

Al utilizar el complemento de formulario jQuery, puede realizar la carga de un archivo asíncrono. Salida el siguiente enlace,

jQuery Plugin Formulario - Ejemplos de código - subida de archivos http://jquery.malsup.com/form/#file-upload

Buena suerte!

Answer 2

Según lo sugerido por Dominic, utilice el jQuery Form plugin. La forma que ya ha creado debería funcionar correctamente. Sólo tiene que añadir un ID para identificarlo:

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" })) 

y usar la Forma jQuery para publicar los datos:

$(document).ready(function(){ 
    $('#asyncForm').submit(function(){ 
     $(this).ajaxSubmit({ 
      beforeSubmit: function(){ 
       //update GUI to signal upload 
      } 
      data: { additional = 'value' }, 
      dataType: 'xml', 
      success: function(xml){ 
       //handle successful upload 
      } 
     }); 
    }); 
}); 

Tenga en cuenta que el tipo de datos de retorno en formas que subir archivos no puede ser JSON. Use XML o HTML como respuesta en el método de su controlador.

Answer 3

Pude cargar un archivo a través de AJAX utilizando el jQuery Form plugin y una clase JsonResult personalizada como se describe here.

Se utiliza para volver algo así como su diccionario

return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } }; 

y para transmitir su mensaje en la función de devolución de llamada

success: function(result) { 
    $("#ajaxUploadForm").unblock(); 
    $("#ajaxUploadForm").resetForm(); 
    alert(result.Msg); 
}