Código de ASP.NET - Cargar y Visualizar una Imagen con JavaScript y Asp .Net MVC

Pos: 29

Val: 13

Ha aumentado 1 puesto en ASP.NET (en relación al último mes)

Cargar y Visualizar una Imagen con JavaScript y Asp .Net MVC

ASP.NET

(6)

Publicado el 7 de Noviembre del 2014 por Charles

25.449 visualizaciones desde el 7 de Noviembre del 2014

En una situación muy particular necesite cargar una imagen mediante un control tipo file en html y enviarla a un controlador para ser procesada, pero también quería retornarla para poder visualizarla.

Luego de programar un rato e investigar un poco pude armar esta solución: Consiste como ya había dicho en cargar una imagen en un objeto tipo file en html y mediante una función javascript enviarla a un controlador mediante el consumo de un web api para luego retornarla como un string en base 64 y mostrarla en un objeto img de html.

v1
(6)

Publicado el 7 de Noviembre del 2014

gráfica de visualizaciones de la versión: v1

25.450 visualizaciones desde el 7 de Noviembre del 2014

++++++++++++++++++++++++++++++++

Código HTML

++++++++++++++++++++++++++++++++

<div class="row">

    <div class="jumbotron">

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

        <div class="row">

            <div class="col-md-6" 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" accept="image/*" onchange="CargarImagen()" />

                    </div>

                </div>

            </div>

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

                <img id="ImgCarga" align="middle" style="width:300px;height:auto" src="~/favicon.ico" alt="Me">

            </div>

        </div>

    </div>

</div>

++++++++++++++++++++++++++++++++

Código JavaScript

++++++++++++++++++++++++++++++++

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script>

    function CargarImagen() {

        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 (data) {

                $("#ImgCarga").attr("src", "data:text/plain;base64," + data);

},

            error: function (jqXHR, textStatus, errorThrown) {

                alert('error');

});

</script>

++++++++++++++++++++++++++++++++

Código Web API

++++++++++++++++++++++++++++++++

public class FileController : ApiController

        public string Post()

            byte[] buffer;

            var request = HttpContext.Current.Request;

            if (request.Files.Count > 0)

                foreach (string file in request.Files)

                    var postedFile = request.Files[file];

                    int length = postedFile.ContentLength;

                    buffer = new byte[length];

                    postedFile.InputStream.Read(buffer, 0, length);

                    return Convert.ToBase64String(buffer);

            return "";

Espero les sea de utilidad, aun falta pulirlo pero funciona [;-)]

Comentarios sobre la versión: v1 (6)

Gaspar Octavio

29 de Agosto del 2016

Gracias mil. Y el código asp.net o VB.net???

Responder

Charles

30 de Enero del 2017

Este codigo es para MVC y esta en C#, se crea un controlador tipo API y se consume por el metodo post desde javascript. Si se hace la traduccion vb.net funciona de la misma manera.

Responder

Tavo

2 de Julio del 2020

Responder

Henryckson

28 de Junio del 2018

Hola! Lo implemente y no me funciona, en tu codigo JS el parámetro URL a que parte hace referencia del proyecto?

Responder

Charles

27 de Julio del 2018

Es un controlador tipo API que se llama File.

Responder

Alexjandrohum

29 de Junio del 2019

Esta es la forma completa de implementar el controlador

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web;

using System.Web.Http;

namespace SaveImage.Controllers

    [RoutePrefix("api")]

    public class FileController : ApiController

        [HttpPost]

        [Route("file")]

        public string Post()

            byte[] buffer;

            var request = HttpContext.Current.Request;

            if (request.Files.Count > 0)

                foreach (string file in request.Files)

                    var postedFile = request.Files[file];

                    int length = postedFile.ContentLength;

                    buffer = new byte[length];

                    postedFile.InputStream.Read(buffer, 0, length);

                    return Convert.ToBase64String(buffer);

            return "";

Responder

Comentar la versión: v1


Nombre

Correo (no se visualiza en la web)

Valoración

Comentarios...

CerrarCerrar

Es necesario revisar y aceptar las políticas de privacidad

Acepto las políticas de privacidad

http://lwp-l.com/s2839

Asp.net y Sql Server

Insert,Update,Delete,Paginacion a una tabla sql server 2000

Código de ASP.NET - Cargar y Visualizar una Imagen con JavaScript y Asp .Net MVC

v1(6)

Comentarios sobre la versión: v1 (6)

Comentar la versión: v1

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

v1
(6)