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

Imágen de perfil

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


ASP.NET

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 08 de Noviembre del 2014 por Charles (Creado el 07 de Noviembre del 2014)
5.663 visualizaciones desde el 07 de Noviembre del 2014. Una media de 56 por semana
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(1)

Actualizado el 08 de Noviembre del 2014 (Creado el 07 de Noviembre del 2014)gráfica de visualizaciones de la versión: v1
5.664 visualizaciones desde el 07 de Noviembre del 2014. Una media de 56 por semana
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 (1)

Gaspar Octavio
29 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
Gracias mil. Y el código asp.net o VB.net???
Responder

Comentar la versión: v1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2839