Asp.Net Compruebe el tamaño del archivo antes de cargarlo

Quiero comprobar el tamaño del archivo seleccionado ANTES cargar un archivo con el componente asp fileupload. No puedo usar activex porque la solución tiene que funcionar en todos los navegadores (firefox, Chrome, etc.)

Cómo puedo hacer eso ?

Gracias por tus respuestas..

preguntado el 22 de junio de 10 a las 12:06

10 Respuestas

ASPX

<asp:CustomValidator ID="customValidatorUpload" runat="server" ErrorMessage="" ControlToValidate="fileUpload" ClientValidationFunction="setUploadButtonState();" />
<asp:Button ID="button_fileUpload" runat="server" Text="Upload File" OnClick="button_fileUpload_Click" Enabled="false" />
<asp:Label ID="lbl_uploadMessage" runat="server" Text="" />

jQuery

function setUploadButtonState() {

   var maxFileSize = 4194304; // 4MB -> 4 * 1024 * 1024
   var fileUpload = $('#fileUpload');

   if (fileUpload.val() == '') {
    return false;
   }
   else {
      if (fileUpload[0].files[0].size < maxFileSize) {
         $('#button_fileUpload').prop('disabled', false);
         return true;
      }else{
         $('#lbl_uploadMessage').text('File too big !')
         return false;
      }
   }
}

Respondido 06 Oct 16, 08:10

Además, sería 4096 * 1024 para obtener el número real de bytes en 4 MB. No 4000 * 1024. - bombomb007

Solo un recordatorio: si usa el nombre real del resultado Será diferente. En mi caso fue id = "content_FileUploadControl" - Lombás

Estoy en el mismo barco y encontré una solución funcional SI su archivo de carga esperado es una imagen. En resumen, actualicé el control ASP.NET FileUpload para llamar a una función de javascript para mostrar una miniatura del archivo seleccionado, y luego, antes de llamar al formulario, enviar y luego verificar la imagen para verificar el tamaño del archivo. Basta de hablar, vayamos al código.

Javascript, incluir en el encabezado de la página

function ShowThumbnail() {
    var aspFileUpload = document.getElementById("FileUpload1");
    var errorLabel = document.getElementById("ErrorLabel");
    var img = document.getElementById("imgUploadThumbnail");

    var fileName = aspFileUpload.value;
    var ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
    if (ext == "jpeg" || ext == "jpg" || ext == "png") {
        img.src = fileName;
    }
    else {
        img.src = "../Images/blank.gif";
        errorLabel.innerHTML = "Invalid image file, must select a *.jpeg, *.jpg, or *.png file.";
    }
    img.focus();
}

function CheckImageSize() {
    var aspFileUpload = document.getElementById("FileUpload1");
    var errorLabel = document.getElementById("ErrorLabel");
    var img = document.getElementById("imgUploadThumbnail");

    var fileName = aspFileUpload.value;
    var ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
    if (!(ext == "jpeg" || ext == "jpg" || ext == "png")) {
        errorLabel.innerHTML = "Invalid image file, must select a *.jpeg, *.jpg, or *.png file.";
        return false;
    }
    if (img.fileSize == -1) {
        errorLabel.innerHTML = "Couldn't load image file size.  Please try to save again.";
        return false;
    }
    else if (img.fileSize <= 3145728) {  
         errorLabel.innerHTML = "";
        return true;
    }
    else {
        var fileSize = (img.fileSize / 1048576);
        errorLabel.innerHTML = "File is too large, must select file under 3 Mb. File  Size: " + fileSize.toFixed(1) + " Mb";
        return false;
    }
}

CheckImageSize está buscando un archivo de menos de 3 Mb (3145728), actualícelo al valor que necesite.

Código HTML ASP

<!-- Insert into existing ASP page -->
<div style="float: right; width: 100px; height: 100px;"><img id="imgUploadThumbnail" alt="Uploaded Thumbnail" src="../Images/blank.gif" style="width: 100px; height: 100px" /></div>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="Javascript: ShowThumbnail();"/>
<br />
<asp:Label ID="ErrorLabel" runat="server" Text=""></asp:Label>
<br />

<asp:Button ID="SaveButton" runat="server" Text="Save" OnClick="SaveButton_Click" Width="70px" OnClientClick="Javascript: return CheckImageSize()" />

Tenga en cuenta que el navegador tarda un segundo en actualizar la página con la miniatura y si el usuario puede hacer clic en Guardar antes de que se cargue la imagen, obtendrá un -1 para el tamaño del archivo y mostrará el error para hacer clic en Guardar nuevamente. Si no desea mostrar la imagen, puede hacer que el control de imagen sea invisible y esto debería funcionar. También necesitará obtener una copia de blank.gif para que la página no se cargue con un enlace de imagen roto.

Espero que encuentre esto rápido, fácil y útil. No estoy seguro de si existe un control HTML similar que pueda usarse solo para archivos generales.

respondido 07 mar '12, 16:03

¡Aquí vengo a salvar el día! Lo siento, llegué 3 años tarde, pero permítanme asegurarles a todos que esto es bastante posible y no es muy difícil de implementar. Simplemente necesita generar la salida del archivo que se está cargando en un control que se pueda validar. Puede hacer esto con javascript, que no requerirá una devolución de datos fea, como si fuera a usar

FileBytes.Length

encontrará una devolución de datos después de que el usuario final haya seleccionado una imagen. (IE usando el onchange="file1_onchange(this);" para lograr esto.). Cualquiera que sea la forma que elija para generar la salida depende de usted, el desarrollador.

Una vez que tenga el tamaño de archivo, simplemente envíelo a un control ASP que pueda ser validado. (Es decir, un cuadro de texto), entonces puede usar una expresión regular para un rango para validar su.

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ValidationExpression="^([1-9][0-9]{0,5}|[12][0-9]{6}|3(0[0-9]{5}|1([0-3][0-9]{4}|4([0-4][0-9]{3}|5([0-6][0-9]{2}|7([01][0-9]|2[0-8]))))))$" ErrorMessage="File is too large, must select file under 3 Mb." ControlToValidate="Textbox1" runat="server"></asp:RegularExpressionValidator>

¡Auge! es fácil. Solo asegúrate de usar el Visibility=Hidden en su control ASP para ser validado y no Display=None porque Display=none aparecerá en la página (aunque aún puede interactuar con él a través del dom). Y Visibility=Hidden no es visible, pero se le asigna espacio en la página.

verificar: http://utilitymill.com/utility/Regex_For_Range para todas sus necesidades de rango de expresiones regulares!

Respondido el 13 de enero de 21 a las 21:01

Creo que es posible usar javascript look aquí

Respondido el 22 de junio de 10 a las 16:06

Enfoque interesante (el último), pero ¿funciona con no imágenes? - František Žiačik

Creo que no puedes hacer eso. Tu pregunta es similar a esta: Obtenga sin usar FileSystemObject en JavaScript

La cuestión es que ASP.NET es un lenguaje del lado del servidor, por lo que no puede hacer nada hasta que tenga el archivo en el servidor.

Entonces, lo que queda es el código del lado del cliente (javascript, java applets, flash?) ... Pero no se puede en javascript puro y las otras soluciones no siempre son "portátiles en el navegador" o sin ningún inconveniente.

contestado el 23 de mayo de 17 a las 13:05

Puedes hacerlo usando javascript.

Ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    if (typeof window.FileReader !== 'function') {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

Respondido 11 Oct 12, 10:10

hola cual opcion es mejor? esta respuesta u otra donde toma el nombre del archivo, lo guarda como una fuente de imagen y verifica el tamaño de la imagen? pero eso solo funciona para cargas de imágenes, William

Validar múltiples archivos con jQuery + asp:CustomValidator un tamaño de hasta 10 MB

jQuery:

    function upload(sender, args) {
        args.IsValid = true;
        var maxFileSize = 10 * 1024 * 1024; // 10MB
        var CurrentSize = 0;
        var fileUpload = $("[id$='fuUpload']");
        for (var i = 0; i < fileUpload[0].files.length; i++) {
            CurrentSize = CurrentSize + fileUpload[0].files[i].size;          
        }
        args.IsValid = CurrentSize < maxFileSize;
    }

ÁSPID:

 <asp:FileUpload runat="server" AllowMultiple="true" ID="fuUpload" />
 <asp:LinkButton runat="server" Text="Upload" OnClick="btnUpload_Click" 
      CausesValidation="true" ValidationGroup="vgFileUpload"></asp:LinkButton>
 <asp:CustomValidator ControlToValidate="fuUpload" ClientValidationFunction="upload" 
      runat="server" ErrorMessage="Error!" ValidationGroup="vgFileUpload"/>

contestado el 11 de mayo de 19 a las 00:05

Considero esta respuesta más apropiada para el enfoque descrito en el oficial documentación - aleha

Le sugiero que use el complemento / complemento de carga de archivos para jQuery. Necesita jQuery, que solo requiere javascript y este complemento: http://blueimp.github.io/jQuery-File-Upload/

Es una herramienta poderosa que tiene validación de imagen, tamaño y la mayor parte de lo que necesita. También debe tener alguna validación del lado del servidor y el lado del cliente puede ser manipulado. Además, solo verificar la extensión del archivo no es lo suficientemente bueno, ya que se puede manipular fácilmente, eche un vistazo a este artículo: http://www.aaronstannard.com/post/2011/06/24/How-to-Securely-Verify-and-Validate-Image-Uploads-in-ASPNET-and-ASPNET-MVC.aspx

Respondido 30 Oct 13, 08:10

$(document).ready(function () {

"use strict";

//This is the CssClass of the FileUpload control
var fileUploadClass = ".attachmentFileUploader",

    //this is the CssClass of my save button
    saveButtonClass = ".saveButton",

    //this is the CssClass of the label which displays a error if any
    isTheFileSizeTooBigClass = ".isTheFileSizeTooBig";

/**
* @desc This function checks to see what size of file the user is attempting to upload.
* It will also display a error and disable/enable the "submit/save" button.
*/
function checkFileSizeBeforeServerAttemptToUpload() {

    //my max file size, more exact than 10240000
    var maxFileSize = 10485760 // 10MB -> 10000 * 1024

    //If the file upload does not exist, lets get outta this function
    if ($(fileUploadClass).val() === "") {

        //break out of this function because no FileUpload control was found
        return false;
    }
    else {

        if ($(fileUploadClass)[0].files[0].size <= maxFileSize) {

            //no errors, hide the label that holds the error
            $(isTheFileSizeTooBigClass).hide();

            //remove the disabled attribute and show the save button
            $(saveButtonClass).removeAttr("disabled");
            $(saveButtonClass).attr("enabled", "enabled");

        } else {

            //this sets the error message to a label on the page
            $(isTheFileSizeTooBigClass).text("Please upload a file less than 10MB.");

            //file size error, show the label that holds the error
            $(isTheFileSizeTooBigClass).show();

            //remove the enabled attribute and disable the save button
            $(saveButtonClass).removeAttr("enabled");
            $(saveButtonClass).attr("disabled", "disabled");
        }
    }
}

//When the file upload control changes, lets execute the function that checks the file size.
$(fileUploadClass).change(function () {

    //call our function
    checkFileSizeBeforeServerAttemptToUpload();

});

});

no olvide que probablemente necesite cambiar web.config para limitar las cargas de ciertos tamaños también, ya que el valor predeterminado es 4 MB https://msdn.microsoft.com/en-us/library/e1f13641%28v=vs.85%29.aspx

<httpRuntime targetFramework="4.5" maxRequestLength="11264" />

contestado el 29 de mayo de 15 a las 20:05

Supongo que la única forma de hacerlo es deshabilitar el botón que activa la carga, en mi caso tengo un simple botón de guardar, .net seguro que a veces es una tontería. Estaba tratando de no desactivar el botón, pero supongo que tú también. tom reese

¿Por qué no utilizar RegularExpressionValidator para la validación del tipo de archivo? La expresión regular para la validación del tipo de archivo es:

ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.jpeg|.gif|.png)$"

contestado el 29 de mayo de 15 a las 18:05

Esta pregunta es sobre tamaño de archivo validación, no ruta de archivo validación. - Simon MᶜKenzie

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.