Asp.Net Проверьте размер файла перед загрузкой - PullRequest
14 голосов
/ 22 июня 2010

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

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

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

Ответы [ 10 ]

17 голосов
/ 17 декабря 2013

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;
      }
   }
}
4 голосов
/ 07 марта 2012

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

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-код

<!-- 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 голосов
/ 10 августа 2013

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

FileBytes.Length

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

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

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

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

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

1 голос
/ 10 ноября 2017

Для проверки нескольких файлов с помощью 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"/>
1 голос
/ 13 июля 2012

Вы можете сделать это с помощью 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>
1 голос
/ 22 июня 2010

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

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

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

1 голос
/ 22 июня 2010

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

0 голосов
/ 29 мая 2015
$(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" />
0 голосов
/ 30 октября 2013

Я предлагаю вам использовать плагин / аддон File Upload для 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

0 голосов
/ 08 апреля 2013

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

ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.jpeg|.gif|.png)$"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...