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

Imágen de perfil
Val: 13
Ha aumentado 1 puesto en ASP.NET (en relación al último mes)
Gráfica de ASP.NET

Cargar y Visualizar una Imagen con JavaScript y Asp .Net MVCgráfica de visualizaciones


ASP.NET

Publicado el 7 de Noviembre del 2014 por Charles
24.856 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
estrellaestrellaestrellaestrellaestrella(6)

Publicado el 7 de Noviembre del 2014gráfica de visualizaciones de la versión: v1
24.857 visualizaciones desde el 7 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
++++++++++++++++++++++++++++++++
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)

29 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
Gracias mil. Y el código asp.net o VB.net???
Responder
Imágen de perfil
30 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
C#
Responder
Henryckson
28 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Hola! Lo implemente y no me funciona, en tu codigo JS el parámetro URL a que parte hace referencia del proyecto?
Responder
Imágen de perfil
27 de Julio del 2018
estrellaestrellaestrellaestrellaestrella
Es un controlador tipo API que se llama File.
Responder
Alexjandrohum
29 de Junio del 2019
estrellaestrellaestrellaestrellaestrella
Esta es la forma completa de implementar el controlador


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
CerrarCerrar
Cerrar

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

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2839