How to validate the extension of a file and preview it. Razor View .net5

kevin david 161 Reputation points
2022-08-08T15:02:54.127+00:00

I'm new to this, and I need to design a website. I tried to use this code but it doesn't work for me. 

@{  
    ViewData["Title"] = "Back Office Process";  
}  
@using Udla.BackOfficeProcess.Utility.General  
@using Microsoft.AspNetCore.Mvc;  
@using Udla.BackOfficeProcess.MVC.Private.Proxy  
  
@{     
    /*  
    var funcionesGenerales = new GeneralFunctions();  
    var randomico = funcionesGenerales.RandomString(4);  
  
    IEnumerable<SelectListItem>  
    listaEstados = new ProxySistemas().LoadComboBox();  
    */  
}  
  
<link href="~/lib/jqGrid/css/ui.jqgrid-bootstrap4.css" rel="stylesheet" />  
<link href="~/lib/jqGrid/css/octicons/octicons.css" rel="stylesheet" />  
<script src="~/lib/jqGrid/i18n/grid.locale-es.js"></script>  
<script src="~/lib/jqGrid/jquery.jqGrid.src.js"></script>  
  
<div class="jumbotron">  
	<h1>Back Office Process</h1>  
	<p class="lead">Sistema para el manejo de procesos Back Office</p>  
</div>  
  
<body>  
    <div>  
        <h3>Carrusel Udla +</h3>  
        <div>  
            <table>  
                <tr>  
                    <td>  
                        <h5>Cargar Imagen:</h5>  
                    </td>  
                    <td>  
                    </td>  
                    <td>  
                        <input type="file" id="archivoInput" name="btnCargarImagen" size="60" value="Cargar imagen"   
                                onchange="return validarExt()"/><br/>  
                        <p align="right">Únicamente imagenes .jpg / .png</p>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <h6>Dimensiones:</h6>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <h6>Nombre de img:</h6>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <h6>Formato:</h6>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <h6>Formato:</h6>  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        <h6>Fecha de carga:</h6>  
                    </td>  
                </tr>  
            </table>  
            <div>  
                <h4>Fotos</h4>  
            </div>  
        </div>  
  
    </div>  
</body>  
<script type="text/javascript">  
  
    function validarExt()  
    {  
        var archivoInput= document.getElementById('archivoInput');  
        var archivoRuta = archivoInput.nodeValue;  
        var extensiones = /(.PNG)$/i  
        var visor = new FileReader();  
  
        if(!extensiones.exec(archivoRuta))  
        {  
            alert("Asegurate de que el formato del rachivo sea el correcto. PNG o JPG")  
            archivoInput.nodeValue='';  
            return false;  
      
        }else  
        {  
            visor.onload=function(e)  
            {  
                document.getElementById('visorArchivo').innerHTML=  
                '<embed src="'+e.target.result+'" width="250" height="250">';  
            };  
            visor.readAsDataURL(archivoInput)  
        }  
    }  
          
  
  
</script>

I need this.
229070-captura-de-pantalla-2022-08-08-100024.png

but now I have this
229232-captura-de-pantalla-2022-08-08-100118.png

Thanks!

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,162 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,254 questions
0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest