Asp.Net Verificar el tamaño del archivo antes de cargar

Question

Quiero verificar el tamaño de archivo seleccionado ANTES cargando un archivo con el componente asp fileupload. No puedo usar activex porque la solución tiene que funcionar en cada navegador (Firefox, Chrome, etc.)

¿Cómo puedo hacer eso?

Gracias por sus respuestas ..

Answer 1

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; 
     } 
    } 
} 

Answer 2

creo que es posible el uso de JavaScript vistazo here

Answer 3

creo que no se puede hacer eso. Su pregunta es similar a esta: Obtain filesize without using FileSystemObject in JavaScript

El problema 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.

Así que lo que queda es el código del lado del cliente (javascript, applets de Java, Flash?) ... pero no se puede en el más puro javascript y las otras soluciones no son siempre "navegador portátil" o sin ningún inconveniente

Answer 4

Estoy en el mismo barco y encontré una solución de trabajo 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, luego verifico la imagen para verificar el tamaño del archivo. Basta de hablar, vayamos al código.

Javascript, incluye en la cabecera 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; 
    } 
} 

El CheckImageSize está buscando un archivo de menos de 3 Mb (3145728), actualizar este valor a lo que necesita.

ASP HTML Código

<!-- 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()" /> 

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

Espero que esto le resulte fácil y rápido de visitar. No estoy seguro de si hay un control HTML similar que pueda usarse solo para archivos generales.

Answer 5

Puede hacerlo utilizando 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> 

Answer 6

Por qué no usar RegularExpressionValidator para la validación de tipo de archivo. Expresión regular para la validación de tipo de archivo es:

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

Answer 7

Aquí vengo a salvar el día! lo siento, tengo 3 años de retraso, pero déjenme asegurarles a todos que esto es bastante posible y no demasiado difícil de implementar. Simplemente necesita generar el tamaño de archivo del archivo que se está cargando en un control que se puede validar.Esto se puede hacer con javascript, que no requieren una devolución de datos fea, donde como si fuera a utilizar

FileBytes.Length 

se encontrará con una devolución de datos después de que el usuario final ha seleccionado una imagen. (I.E. usando el onchange = "file1_onchange (this);" para lograr esto). Cualquiera que sea la forma que elija para generar el tamaño del archivo, usted es el desarrollador.

Una vez que tenga el tamaño de filtro, simplemente déjelo en un control ASP que se pueda validar. (I.E., un cuadro de texto) luego puede usar una expresión regular para un rango para validar su tamaño de archivo.

<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> 

¡Boom! es fácil. Solo asegúrese 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 está visible, pero se asigna espacio en la página.

echa un vistazo a: http://utilitymill.com/utility/Regex_For_Range para todas sus necesidades de rango regex!

Answer 8

Le sugiero que use el complemento de carga de archivos/complemento 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, sólo comprobando la extensión de archivo no es lo suficientemente bueno como se puede easly manipulado, echar 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

Answer 9

$(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 el archivo web.config para limitar las cargas de ciertos tamaños, ya que el valor predeterminado es 4MB https://msdn.microsoft.com/en-us/library/e1f13641%28v=vs.85%29.aspx

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

Answer 10

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

jQuery:

function upload(sender, args) { 
    arguments.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; 
} 

ASP:

<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"/>