0

Estoy presentando un inconveniente al momento de querer cargar archivos en asp.NET con un cierto formato, solamente deseo cargar archivos de tipo PDF y jpg.

La siguiente es la vista con la cual cargo los documentos

<body class="bodydoc">
    <div class="documento">
        @if (@Model.FileType ==
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        || Convert.ToSingle(Model.FileContentSize) > 1500

    )
        else
        {
            
        <object data="data:@Model.FileType;base64,@Model.FileContent"
                width="550px" height="400px"></object>
        }
        
    </div>
</body>

El siguiente es la clase con la que cargo los documentos:

public class FileInfoFtp
    {
        public FileInfoFtp()
        {
        }
        public string FileName { get; internal set; }
        public string FileType { get; internal set; }
        [JsonIgnore]
        public string FileId { get; }

        private string fileContent;

        public string FileContentSize { get; internal set; }
        public string FileContent
        {
            get => fileContent;
            set
            {
                fileContent = value;
                this.FileContentSize = (value.Length / 1000).ToString("#0,00");
            }
        }
    }

El problema que estoy presentando es que me esta permitiendo la carga de cualquier tipo de archivos desde un .exe hasta un archivo .sql, quisiera limitar a solo los archivos que mencione anteriormente.

ACTUALIZACIÓN:

El siguiente es el código de la ventana en la cual cargo el archivo

                <div class="modal-dialog" role="dialog">
                    <div class="modal-content" style="padding: 1rem 1rem;background-color: #f7f7f7">

                        <div>
                            <div>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div style="display: flex;flex-direction: row;justify-content: center; padding-top: 1rem; padding-top: 1rem;padding-left: 2rem;">
                                <img style="width:50%" src="~/images/Recursos/image6.png" class="img-responsive" />
                            </div>
                            <br />
                            <div class="modal-body">
                                <form>
                                    <div style="display:flex;flex-direction:row;justify-content: space-around;">
                                        <label type="text" id="clave" name="clave" style="display:none;"></label>
                                        <div style="margin-right: 20px;" onclick="borrar()">
                                            <label for="file-upload" class="custom-file-upload">
                                                <img style="width:225px" src="~/images/Recursos/image5.png" />
                                            </label>
                                            @*<button id="uploadBtn" style="background-image:url(../images/Recursos/image5.png)"></button>*@
                                            <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
                                        </div>
                                        <div>
                                            <label>
                                                <img onclick="guardar()" id="SubirArchivo" style="width:225px" src="~/images/Recursos/image4.png" />
                                            </label>
                                            @*<input  type="file" style="display:none;">*@
                                        </div>

                                    </div>

                                    <div style="text-align:center">
                                        <label id="fileName" style="color:#a1a0a1;font-family:'Montserrat-Bold'"></label>
                                    </div>

                                    <div class="alert alert-warning" id="notFound" style="display:none">
                                        <strong id="textoAdvertencia"></strong>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="modal fade" id="ModalExito">

                <div class="modal-dialog" role="dialog">
                    <div class="modal-content" style="padding: 1rem 1rem;background-color: #f7f7f7">

                        <div>
                            <br />
                            <div class="modal-body">
                                <form>

                                    <div style="display:flex;justify-content: space-around;">
                                        <img style="width:225px" src="~/images/Recursos/image2.png" />
                                    </div>

                                    <h1></h1>
                                    <div style="display:flex;justify-content: space-around;" onclick="refrescar()">
                                        <label data-dismiss="modal" style="cursor:pointer"><img style="width:225px" src="~/images/Recursos/image3.png" /></label>
                                        @*<img style="width:225px;align-content:center" src="~/images/Recursos/image3.png" />*@
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="modal fade" id="ModalError">

                <div class="modal-dialog" role="dialog">
                    <div class="modal-content" style="padding: 1rem 1rem;background-color: #f7f7f7">
                        <div>
                            <br />
                            <div class="modal-body">
                                <form>
                                    <div style="display:flex;justify-content: space-around;">
                                        <img style="width:225px" src="~/images/Recursos/image.png" />
                                    </div>

                                    <h1></h1>
                                    <div style="display:flex;justify-content: space-around;">
                                        <label data-dismiss="modal" style="cursor:pointer"><img style="width:225px" src="~/images/Recursos/image1.png" /></label>

                                        @*<img style="width:225px;align-content:center" src="~/images/Recursos/image3.png" />*@
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="ModalPrueba">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <form>
                            <div id="progressOuter" class="progress progress-striped active hidden">
                                <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                </div>
                            </div>

                            <div class="row" style="padding-top:10px;">
                                <div class="col-xs-12 text-center">
                                    <!– Botón para adjuntar archivos –>
                                    <button id="uploadBtn" class="btn btn-large btn-primary">Examinar</button>
                                </div>
                            </div>

                            <div class="row" style="padding-top:10px;">
                                <div class="col-xs-12">
                                    <!– div para mensajes de error y otros mensajes deseados –>
                                    <div id="msgBox" style="display:none;" class="alert alert-success"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="modal fade" id="ModalImagen">

                <div class="modal-dialog" role="dialog">
                    <div class="modal-content" style="padding: 1rem 1rem;background-color: #f7f7f7">

                        <div>
                            <br />
                            <div class="modal-body">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <label style="font-family:'Montserrat-Bold'">¿Acepta continuar con la carga del archivo?</label>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="modal-btn-si">Si</button>
                        <button type="button" class="btn btn-primary" id="modal-btn-no">No</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

ACTUALIZACIÓN 2:

Probando una de las respuestas de Angel Reyna lo adapte al código mío para al momento de cargar un archivo diferente a un PDF no me sale la excepción de Extensión no permitida

jQuery(document).ready(function () {
    $('#file-upload').change(function () {
        var ext = $(this).val().split('.').pop();
        if ($(this).val() != '') {
            if (ext == "pdf") {
                alert("La extensión es: " + ext);
                $('#ModalError').modal('hide');
                var i = $(this).prev('label').clone();
                var file = $('#file-upload')[0].files[0].name;
                document.getElementById("fileName").innerHTML = file;
            } else {
                $("#modal-gral").hide();
            }
        } else {
            $(this).val('');
            alert("Extensión no permitida: " + ext);
        }
    
});

Saben si estoy haciendo algo mal con el manejo de excepciones

ACTUALIZACIÓN 3:

Agrego la función completa del método de carga, pero aquí sigo con el problema de excepción cuando no es un archivo PDF.

jQuery(document).ready(function () {
    $('#file-upload').change(function () {
        var ext = $(this).val().split('.').pop();
        if ($(this).val() != '') {
            if (ext == "pdf") {
                alert("La extensión es: " + ext);
                $('#ModalError').modal('hide');
                var i = $(this).prev('label').clone();
                var file = $('#file-upload')[0].files[0].name;
                document.getElementById("fileName").innerHTML = file;
            } else {
                $("#modal-gral").hide();
            }
        } else {
            $(this).val('');
            alert("Extensión no permitida: " + ext);
        }

        $('#myModalCarga').on('hidden.bs.modal', function () {
            //debugger;
            document.getElementById("fileName").innerHTML = "";
            $('#file-upload').val('')
            $('#notFound').css("display", "none");
            //window.location.reload();
        });

        var docsalumn;
        ObtenerDocumentos();

        $('#trigger').click(function () {
            $("#dialog").dialog();
        });
        $('#top').css({
            'position': 'fixed',
            'right': '30px',
            'bottom': '30px',
        });
        $("#return").css({
            "position": "absolute",
            "right": "30px",
            "top": "30px",
        }).on("click", function () {
            window.history.back();
        });
    });
})
4
  • 1
    Hola Sebastian, entendi el codigo .net pero mi duda es del lado del lado HTML / javascritpt ... necesitas subir archivos desde la web via ajax al servidor controlando el mime type?
    – toto
    Commented el 31 jul. 2020 a las 1:31
  • @toto No utilizo ningún código javascript para validar el formato de los archivos que se suben
    – John Doe
    Commented el 31 jul. 2020 a las 2:33
  • Puedes utilizar un atributo, donde controles las extensiones permitidas, igualmente puede controlar el mimetype desde javascript.
    – Jairo1010
    Commented el 3 ago. 2020 a las 17:08
  • @Jairo1010 Puedes agregar un ejemplo como respuesta para validarla como correcta por favor.
    – John Doe
    Commented el 3 ago. 2020 a las 19:50

2 respuestas 2

1
+100

Si tienes permitido dejar que elija el archivo y luego validar la extención con jquery puedes hacerlo de esta manera que incluye el peso: codigo de Cómo validar solo PDF en Input File

$('input[type="file"]').on('change', function(){
  var ext = $( this ).val().split('.').pop();
  if ($( this ).val() != '') {
    if(ext == "pdf"){
      alert("La extensión es: " + ext);
      if($(this)[0].files[0].size > 1048576){
        console.log("El documento excede el tamaño máximo");
        $('#modal-title').text('¡Precaución!');
        $('#modal-msg').html("Se solicita un archivo no mayor a 1MB. Por favor verifica.");
        $("#modal-gral").modal();           
        $(this).val('');
      }else{
        $("#modal-gral").hide();
      }
    }
    else
    {
      $( this ).val('');
      alert("Extensión no permitida: " + ext);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="application/pdf" />

En la tercer actualizacion veo que retiraste el if del tamaño pero no el else, dejo una extraccion de tu codigo y como deberia estar el jqueri si retiras la validación del tamaño

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
 <label for="file-upload" class="custom-file-upload">
                                                
 <img style="width:225px" src="~/images/Recursos/image5.png" />
                                       
 </label>
                                        
@*<button id="uploadBtn" style="background-image:url(../images/Recursos/image5.png)"></button>*@
                                        
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
                                
<script>

jQuery(document).ready(function () {
$('#file-upload').on('change', 
function(){
  var ext = $(this).val().split('.').pop();
  if ($(this).val() != '') {
    if(ext == "pdf"){
      alert("La extensión es: " + ext);
    }
    else
    {
      $( this ).val('');
      alert("Extensión no permitida: " + ext);
    }
  }
});
});
</script>

</body>
</html>
8
  • Muchas gracias por tu respuesta, revisa mi ultima actualización estoy presentando un problema con la excepción.
    – John Doe
    Commented el 6 ago. 2020 a las 21:10
  • Con que boton estas abriendo el buscador de windows? Con una vista rapida veo que el que tiene id file-upload esta oculto con display:none y luego hay un boton de examinar
    – Ange Reyna
    Commented el 6 ago. 2020 a las 22:20
  • Así es, en una de mis actualizaciones esta la vista, primero se abre una ventana modal para examinar la carpeta, luego va y busca en Windows, despues se cierra y aparece el nombre del archivo que se cargo debajo de los botones, y por ultimo se presiona subir archivo y sale el mensaje de confirmación
    – John Doe
    Commented el 6 ago. 2020 a las 22:26
  • @Sebastian Salazar ahora que veo el jquery que usas agregaste el document.ready, segun veo no cierras el corchete y parentesis de la funcion, la ultima linea sería algo como });}) prueba de esa forma
    – Ange Reyna
    Commented el 7 ago. 2020 a las 0:19
  • Intente lo de agregar el corchete y el paréntesis pero sigo con el mismo problema de la excepción, revisa la ultima actualización agregue toda la función completa para la carga del archivo.
    – John Doe
    Commented el 7 ago. 2020 a las 16:01
0

En tu input type ="file" deberás indicarle mediante el método accept que solo te admita archivos pdf y jpeg

<input type="file" accept="application/pdf,image/jpeg">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.