Asp.Net Проверьте размер файла перед загрузкой

Я хочу проверить выбранный размер файла ПЕРЕД загрузкой файла с помощью компонента asp fileupload. Я не могу использовать activex, потому что решение должно работать в каждом браузере (firefox, Chrome и т.д.)

Как я могу это сделать?

Спасибо за ваши ответы..

Ответы

Ответ 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;
      }
   }
}

Ответ 2

Я нахожусь в одной лодке и нашел рабочее решение, если ваш ожидаемый файл загрузки - это изображение. Короче говоря, я обновил элемент управления ASP.NET FileUpload, чтобы вызвать функцию javascript, чтобы отобразить миниатюру выбранного файла, а затем перед вызовом формы submit затем проверьте изображение, чтобы проверить размер файла. Достаточно поговорить, перейдите в код.

Javascript, включите в заголовок страницы

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 ищет файл размером менее 3 Мб (3145728), обновляйте его до любого значения, которое вам нужно.

ASP HTML Code

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

Обратите внимание, что браузеру требуется секундомер, чтобы обновить страницу с помощью миниатюры, и если пользователь может нажать "Сохранить" до загрузки изображения, он получит -1 для размера файла и отобразит ошибку, чтобы снова нажать "Сохранить"., Если вы не хотите отображать изображение, вы можете сделать управление изображением невидимым, и это должно сработать. Вам также понадобится получить копию blank.gif, чтобы страница не загружалась со сломанной ссылкой на изображение.

Надеюсь, вы найдете это быстро и легко, чтобы войти и помочь. Я не уверен, есть ли подобный элемент управления HTML, который может использоваться только для общих файлов.

Ответ 3

Здесь я прихожу, чтобы спасти день! жаль, что я опаздываю на 3 года, но позвольте мне заверить всех, что это вполне возможно и не трудно реализовать! Вам просто нужно вывести размер файла загружаемого файла в элемент управления, который может быть проверен. Вы можете сделать это с помощью javascript, который не потребует уродливой обратной передачи, где, как если бы вы использовали

FileBytes.Length

вы столкнетесь с обратной записью после того, как конечный пользователь выбрал изображение. (I.E., используя onchange = "file1_onchange (this);" для выполнения этого.). Каким бы способом вы не выбрали файл, зависит от вас разработчик.

После того, как у вас есть filzesize, просто отправьте его в элемент управления ASP, который можно проверить. (I.E. текстовое поле), вы можете использовать регулярное выражение для диапазона для проверки для вашего файла.

<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! это легко. Просто убедитесь, что Visibility=Hidden на вашем элементе управления ASP проверен, а не Display=None, потому что Display=None появится на странице вообще (хотя вы все равно можете взаимодействовать с ним через dom). И Visibility=Hidden не отображается, но для него выделяется пространство на странице.

проверьте: http://utilitymill.com/utility/Regex_For_Range для всех ваших потребностей диапазона regex!

Ответ 4

Я думаю, что можно использовать JavaScript-просмотр здесь

Ответ 5

Я думаю, вы не можете этого сделать. Ваш вопрос похож на этот: Получить размер файла без использования FileSystemObject в JavaScript

Дело в том, что ASP.NET - это серверный язык, поэтому вы ничего не можете сделать, пока у вас не будет файла на сервере.

Итак, что же такое клиентский код (javascript, java-апплеты, flash?)... Но вы не можете в чистом javascript, а другие решения не всегда "портативны для браузера" или без каких-либо недостатков.

Ответ 6

Вы можете сделать это, используя javascript.

Пример:

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

Ответ 7

Чтобы проверить несколько файлов с помощью jQuery + asp:CustomValidator размером до 10 МБ

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

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

Ответ 8

Я предлагаю использовать плагин/дополнение для загрузки файлов для jQuery. Вам нужен jQuery, который требует только javascript и этот плагин: http://blueimp.github.io/jQuery-File-Upload/

Это мощный инструмент, который имеет проверку изображения, размера и большей части того, что вам нужно. Вы также должны иметь подделку на стороне сервера и клиентскую сторону. Также только проверка расширения файла недостаточно хороша, так как его можно легко подделать, посмотрите на эту статью: http://www.aaronstannard.com/post/2011/06/24/How-to-Securely-Verify-and-Validate-Image-Uploads-in-ASPNET-and-ASPNET-MVC.aspx

Ответ 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();

});

});

Не забывайте, что вам, вероятно, нужно изменить web.config, чтобы ограничить загрузку определенных размеров, так как по умолчанию используется 4MB https://msdn.microsoft.com/en-us/library/e1f13641%28v=vs.85%29.aspx

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

Ответ 10

Почему бы не использовать RegularExpressionValidator для проверки типа файла. Регулярное выражение для проверки типа файла:

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