Table of contents
ALM
MVC
TOC
Collapse the table of content
Expand the table of content

[ASP.NET Web API] Subiendo archivo con jQuery y Web API

Microsoft Community Publishing Service|Última actualización: 26/05/2017
|
1 Colaborador

Por Julio Cesar Avellaneda

Microsoft MVP ASP.NET

MCT | MCSD | MCTS

Core Group BDotNet

http://julitogtu.com

@julito

Hola, hoy quiero mostrarles cómo podemos subir archivos al servidor utilizando jQuery y un servicio con ASP.NET Web API.

Lo primero es que vamos a definir el código HTML, lo importante es definir un input de tipo file:

    <div class="jumbotron">

    <h1>ASP.NET Web API - File Upload</h1>

    <div class="row">

    <div class="col-md-12" style="font-size:medium">

    <div class="form-group">

    <label class="col-md-2 control-label">Archivo:</label>

    <div class="col-md-10">

    <input id="inputFile" type="file" multiple="multiple" />

    </div>

    </div>

    <div class="form-group">

    <div class="col-md-offset-2 col-md-10">

    <input type="submit" value="Subir" id="btnUpload" class="btn
    btn-default" />

    </div>

    </div>

    </div>

    </div>

    </div>

Ahora vamos a implementar la parte de JavaScript, en este caso vamos a asociar un manejador para el evento clic del botón btnUpload y allí dentro haremos uso de AJAX para comunicarnos con el servidor:

    \$(document).on("ready", function () {

    \$("\#btnUpload").on('click', function () {

    var files = \$("\#inputFile").get(0).files;

    var data = new FormData();

    for (i = 0; i < files.length; i++) {

    data.append("file" + i, files\[i\]);

    }

    \$.ajax({

    type: "POST",

    url: "/api/file",

    contentType: false,

    processData: false,

    data: data,

    success: function (result) {

    if (result)

    {

    alert('Archivos subidos correctamente');

    \$("\#inputFile").val('');

    }

    }

    });

    })

    })

Lo que el código anterior hace es:

  1. Obtiene la colección de archivos seleccionados.

  2. Crea un nuevo objeto FormData y añade los archivos seleccionados

  3. Se realiza la petición al servidor utilizando AJAX (en este caso apoyados en jQuery), en URL definimos la URL del servicio (que vamos a crear en el siguiente paso), el verbo Http que es un POST y los datos a enviar.

Ahora el controlador:

    public class FileController : ApiController

    {

    public IHttpActionResult Post()

    {

    var request = HttpContext.Current.Request;

    if (request.Files.Count > 0)

    {

    foreach (string file in request.Files)

    {

    var postedFile = request.Files\[file\];

    var filePath =
    HttpContext.Current.Server.MapPath(string.Format("\~/Uploads/{0}",
    postedFile.FileName));

    postedFile.SaveAs(filePath);

    }

    return Ok(true);

    }

    else

    return BadRequest();

    }

    }

El código del controlador es sencillo, simplemente leemos la cantidad de archivos en el request y en caso de ser mayor a 0 iteramos sobre cada uno de ellos y lo guardamos.

Espero el ejemplo les sea de utilidad, ¡saludos!

© 2018 Microsoft