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

https://stackoverflow.com/questions/1002680

05-07-2019
|

Pregunta

Estoy intentando que el complemento jQuery, Uploadify , funcione con ASP. NET MVC.

Tengo el complemento que se muestra bien con el siguiente fragmento de código JavaScript:

<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>

Lo que parece que todo está bien en el bien. Si observa, la secuencia de comandos " " " el atributo está establecido en mi / Colocación / Carga, que es mi Controlador de ubicación y mi Acción de carga.

El problema principal es que tengo dificultades para activar esta acción para recibir el archivo. He establecido 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 en este artículo :

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

Pero esto todavía no se dispara.

¿Puede alguien ayudarme a escribir y obtener la firma de la acción Cargar controlador de forma correcta para que realmente se active? Entonces puedo manejar el manejo de los datos del archivo yo mismo. Solo necesito ayuda para activar el método de acción.

Solución

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 dificulta la burla y la prueba.

Si su acción no se está activando en absoluto (es decir, intente la depuración y vea si se encuentra un punto de interrupción dentro del método), entonces su problema es probablemente el valor del 'script'. ¿Está ejecutando un directorio virtual? Si es así, deberás poner el nombre del directorio al frente. Uploadify está utilizando una ruta absoluta.

es decir, 'script:' / virtual_directory / Placement / Upload '

ahora mismo uploadify está enviando a http: // localhost / Placement / Upload .

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

Otros consejos

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.

Entonces, esto:

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

Debería ser esto:

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

Además, tenga en cuenta que si está usando esto en un " iniciado sesión en " En la sección de su sitio, debería consultar aquí 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

También, aparte de eso, hay varias formas en MVC para manejar las cargas de archivos (usando los archivos de Request.Files según la sugerencia de Rory Fitzpatrick, 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.

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 Request actual para sumergirse en la colección de archivos publicados.

Algunos ejemplos de código de mi implementació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. Tienes que burlarte de varios objetos para 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 crear una interfaz en los archivos publicados y solo simular que, con una implementación concreta inyectada en su controlador utilizando IoC.

Creo que esto se basó en gran parte de esta publicación:

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

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

Al leer la documentación, parece que está enviando una serie de archivos. ¿Has probado?

public string Upload( HttpPostedFileBase[] fileData )

También es posible que el cuaderno de modelos predeterminado no funcione con HttpPostedFileBase y que necesites usar el mecanismo de Rory o escribir tu propio cuaderno de modelos.

Aquí está mi simple Razor View (el maestro de diseño tiene los paquetes 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í está 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!

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow