¿Cómo consigo que el complemento Uploadify de jQuery funcione con ASP.NET MVC?

Question

Estoy en el proceso de intentar obtener el complemento jQuery, Uploadify, para trabajar con ASP.NET MVC.

Tengo el plugin aparecer bien con las fragmento de JavaScript siguiente:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#fileUpload').fileUpload({ 
      'uploader': '/Content/Flash/uploader.swf', 
      'script': '/Placement/Upload', 
      'folder': '/uploads', 
      'multi': 'true', 
      'buttonText': 'Browse', 
      'displayData': 'speed', 
      'simUploadLimit': 2, 
      'cancelImg': '/Content/Images/cancel.png' 
     }); 
    }); 
</script> 

que parece que todo está bien en el bien. Si lo nota, el atributo "script" se establece en my/Placement/Upload, que es mi controlador de ubicación y mi acción de carga.

El principal problema es que tengo dificultades para activar esta acción y recibir el archivo. Establecí un punto de interrupción en esa acción y cuando selecciono un archivo para cargar, no se está ejecutando.

He intentado cambiar la firma del método basado fuera this article:

public string Upload(HttpPostedFileBase FileData) 
{ 
    /* 
    * 
    * Do something with the FileData 
    * 
    */ 
    return "Upload OK!"; 
} 

Pero esto todavía no se dispara.

¿Alguien me puede ayudar a escribir y obtener la firma de la acción del controlador de carga correctamente para que se dispare? Entonces puedo manejar el manejo de los datos del archivo yo mismo. Solo necesito ayuda para activar el método de acción.

Answer 1

public string Upload(HttpPostedFileBase FileData) {} 

es correcto - el archivo cargado por uploadify se vinculará a FileData. No es necesario entrar en Request.Files para recuperar el archivo, lo que hace que sea más difícil burlarse y probar.

Si su acción no se activa (es decir, intente depurar y vea si se alcanza un punto de interrupción dentro del método), es probable que su problema sea el valor 'script': ¿se ejecuta bajo un directorio virtual? Si es así, tendrá que poner el nombre del directorio por adelantado. Uploadify está usando una ruta absoluta.

es decir, 'guión: '/ virtual_directory/Colocación/Cargar'

ahora uploadify es el envío a http://localhost/Placement/Upload.

intente también utilizar el depurador de rutas (http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx) para verificar a dónde está asignada su ruta.

Answer 2

No es así como tuve que implementar la carga de archivos. Tenía un método de acción sin parámetros que utilizaba el objeto de solicitud actual para sumergirse en la colección de archivos publicados.

algunos ejemplos de código de mi aplicación:

[AcceptVerbs(HttpVerbs.Post)] 
public ContentResult Upload() { 
    if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) { 
     HttpPostedFileBase postedFile = Request.Files[0]; 
     // Do something with it 
    } 
} 

Por supuesto, escribir pruebas para esto se convierte en un PITA. Usted tiene que burlarse de varios objetos con el fin de conseguir que funcione, por ejemplo:

var mockHttpContext = mocks.StrictMock<HttpContextBase>(); 
var mockRequest = mocks.StrictMock<HttpRequestBase>(); 
var postedFile = mocks.StrictMock<HttpPostedFileBase>(); 

var postedFileKeyCollection = mocks.StrictMock<HttpFileCollectionBase>(); 

mockHttpContext.Expect(x => x.Request).Return(mockRequest).Repeat.Any(); 
mockRequest.Expect(x => x.Files).Return(postedFileKeyCollection).Repeat.Any(); 

postedFileKeyCollection.Expect(x => x[0]).Return(postedFile).Repeat.Any(); 
postedFileKeyCollection.Expect(x => x.Count).Return(1); 

postedFile.Expect(f => f.ContentLength).Return(1024); 
postedFile.Expect(f => f.InputStream).Return(null); 

Sería más fácil para crear una interfaz en las imágenes comentadas y sólo burlarse de que, con una aplicación concreta inyecta en su controlador usando IoC.

Creo que esto se basa en gran medida fuera de este post: Implementing HTTP File Upload with ASP.NET MVC including Tests and Mocks

Answer 3

lectura de la documentación, que parece que es el envío de un conjunto de archivos. ¿Ha tratado:

public string Upload(HttpPostedFileBase[] fileData) 

También es posible que el aglutinante modelo por defecto no funcionará con HttpPostedFileBase y que se tendrá que utilizar el mecanismo de Rory o escribir sus propios modelos aglutinante.

Answer 4

El problema podría ser que necesita especificar que la acción que está cargando está configurada en Publicar ... no funcionará con la acción como una acción Obtener.

lo tanto, esto:

public string Upload(HttpPostedFileBase FileData) 
{ 
    //do something 
} 

En caso de que sea esta:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Upload(HttpPostedFileBase FileData) 
{ 
    //do something 
} 

Además, tenga en cuenta que si usted está usando esto en una "revisión en línea" sección de su sitio, usted debe tomar un vistazo aquí para un error conocido con uploadify y autenticación: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx

Además, solo un lado, hay varias maneras en MVC para manejar cargas de archivos (utilizando Request.Files según Rory Fitzp la sugerencia de atrick, así como pasar el archivo HttpPostedFileBase como un argumento en la definición de acción). Realmente no debería importar para que Uploadify funcione.

Answer 5

Mi solución completa a esto podría resolver su problema. Espero eso ayude.

http://zootfroot.blogspot.com/2010/12/mvc-file-upload-using-uploadify-with.html

Answer 6

Aquí está mi maquinilla de afeitar sencilla Vista (El maestro tiene Disposición de los haces de Javascript)

@{ 
ViewBag.Title = "Upload Email CSV"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script> 

<script type="text/javascript"> 

$(function() { 
    var uploadUrl = "@Url.Content("~/UploadFile/UploadEmailCSV/")"; 
    var uploadSWF = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")"; 
    var uploadifyButtonImage = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")"; 

    $('#file_upload').uploadify({ 
     'fileSizeLimit': '0', 
     'buttonImage': '/uploadify/browse-btn.png', 
     'swf': uploadSWF, 
     'uploader': uploadUrl, 
     'onUploadSuccess': function(file, data, response) { 
      alert('The file was saved to: ' + data); 
     } 
    }); 
}); 
</script> 
<h2>Upload a comma separated list of email addresses</h2> 
@using (Html.BeginForm("UploadEmailCSV", "UploadFile", FormMethod.Post, new { @class = "form-horizontal", @enctype = "multipart/form-data", @id = "frmUploadFiles" })) 
{ 
    <input type="file" name="file_upload" id="file_upload" /> 
} 

Aquí es el método Contoller

public ActionResult UploadEmailCSV() 
    { 
     var uploadedFile = Request.Files["Filedata"]; 

     if (uploadedFile != null && uploadedFile.ContentLength > 0) 
     { 
      var filePath = Path.Combine(Server.MapPath("~/UploadedFiles"), string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName))); 
      uploadedFile.SaveAs(filePath); 
      return Content(string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName))); 

     } 
     return Content("Error Uploading file!"); 
    } 

Eso es todo!