Asp.Net Vérifiez la taille du fichier avant le téléchargement

Question

Je veux vérifier la taille de fichier sélectionnée AVANT en téléchargeant un fichier avec le composant asp fileupload. Je ne peux pas utiliser ActiveX parce que la solution doit fonctionner sur chaque navigateur (Firefox, Chrome, etc ..)

Comment puis-je faire cela?

Merci pour vos réponses ..

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

je pense qu'il est possible en utilisant javascript regarder here

Answer 3

Je pense que vous ne pouvez pas faire cela. Votre question est similaire à celle-ci: Obtain filesize without using FileSystemObject in JavaScript

Le fait est que ASP.NET est un langage côté serveur donc vous ne pouvez rien faire tant que vous n'avez pas le fichier sur le serveur.

Alors qu'est-ce qui reste est le code côté client (javascript, applets java, flash?) ... Mais vous ne pouvez pas en pur javascript et les autres solutions ne sont pas toujours « navigateur portable » ou sans inconvénient

Answer 4

Je suis dans le même bateau et j'ai trouvé une solution de travail SI votre fichier de téléchargement attendu est une image. En bref, j'ai mis à jour le contrôle ASP.NET FileUpload pour appeler une fonction javascript pour afficher une vignette du fichier sélectionné, puis avant d'appeler le formulaire, puis en vérifiant l'image pour vérifier la taille du fichier. Assez parlé, passons au code.

Javascript, inclure dans la page en-tête

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

Le CheckImageSize est à la recherche d'un fichier moins de 3 Mo (3145728), mettre à jour ce à toute valeur dont vous avez besoin.

ASP Code HTML

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

Notez le navigateur prend une seconde pour mettre à jour la page avec la vignette et si l'utilisateur est en mesure de cliquer sur Enregistrer avant l'image est chargée, il recevra un - 1 pour la taille du fichier et afficher l'erreur pour cliquer à nouveau sur Enregistrer. Si vous ne voulez pas afficher l'image, vous pouvez rendre le contrôle de l'image invisible et cela devrait fonctionner. Vous devrez également obtenir une copie de blank.gif afin que la page ne se charge pas avec un lien d'image brisée.

J'espère que vous trouverez cela rapide et facile à déposer et utile. Je ne suis pas sûr s'il existe un contrôle HTML similaire qui pourrait être utilisé uniquement pour les fichiers généraux.

Answer 5

Vous pouvez le faire en utilisant javascript.

Exemple:

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

Pourquoi ne pas utiliser RegularExpressionValidator pour la validation du type de fichier. Expression régulière pour la validation du type de fichier est:

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

Answer 7

je viens ici pour sauver la journée! désolé j'ai 3 ans de retard mais, permettez-moi de rassurer tout le monde que c'est tout à fait possible et pas difficile à mettre en œuvre! Vous avez simplement besoin de sortir la taille du fichier en cours de téléchargement vers un contrôle qui peut être validé.Vous pouvez le faire avec javascript, qui ne nécessitent pas un postback laid, où comme si vous deviez utiliser

FileBytes.Length 

vous rencontrerez un postback après que l'utilisateur final a sélectionné une image. (I.E. en utilisant le onchange = "file1_change (this);" pour accomplir ceci.). Quelle que soit la façon dont vous choisissez de sortir la taille de fichier est à vous le développeur. Une fois que vous avez la taille de fichier, il suffit de la sortir sur une commande ASP qui peut être validée. (I.E. une zone de texte) alors vous pouvez utiliser une expression régulière pour une gamme à valider pour votre taille de fichier.

<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! C'est si facile. Assurez-vous simplement d'utiliser le Visibility=Hidden sur votre contrôle ASP pour être validé et non Display=None car Display=none apparaîtra sur la page du tout (bien que vous puissiez toujours interagir avec lui via le dom). Et Visibility=Hidden n'est pas visible, mais de l'espace lui est alloué sur la page.

consultez: http://utilitymill.com/utility/Regex_For_Range pour tous vos besoins de gamme regex!

Answer 8

Je vous suggère d'utiliser le plugin/addon de téléchargement de fichiers pour jQuery. Vous avez besoin de jQuery qui ne nécessite que JavaScript et ce plugin: http://blueimp.github.io/jQuery-File-Upload/

C'est un outil puissant qui a la validation de l'image, la taille et la plupart de ce dont vous avez besoin. Vous devriez également avoir une validation côté serveur et le côté client peut être falsifié. Aussi vérifier que le fichier est extention pas assez bon car il peut être easly trafiqué, jetez un oeil à cet article: 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(); 

}); 

}); 

N'oubliez pas que vous devez probablement modifier le fichier web.config pour limiter les téléchargements de certaines tailles, car la valeur par défaut est 4 Mo https://msdn.microsoft.com/en-us/library/e1f13641%28v=vs.85%29.aspx

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

Answer 10

Pour valider plusieurs fichiers avec jQuery + asp:CustomValidator une taille allant jusqu'à 10 Mo

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