Использование jQuery, ограничение размера файла перед загрузкой

Я не думаю, что это возможно, если вы не используете загрузчик flash, activex или java.

По соображениям безопасности ajax / javascript не разрешен доступ к файловому потоку или свойствам файла до или во время загрузки.

Я столкнулся с той же проблемой. Вы должны использовать ActiveX или Flash (или Java). Хорошо то, что это не обязательно должно быть агрессивным. У меня есть простой метод ActiveX, который вернет размер загружаемого файла.

Если вы выберете Flash, вы даже можете сделать несколько причудливых js / css для настройки процесса загрузки - только используя Flash (как «фильм» 1x1) для доступа к функциям загрузки файлов.

Я обнаружил, что Apache2 (вы можете также проверить Apache 1.5) имеет способ ограничить это перед загрузкой, поместив это в ваш файл .htaccess:

LimitRequestBody 2097152

Это ограничивает его 2 мегабайтами (2 * 1024 * 1024) при загрузке файла (если я правильно выполнил вычисления с байтами).

Обратите внимание, что когда вы это сделаете, журнал ошибок Apache будет генерировать эту запись, когда вы превысите этот лимит в публикации формы или получите запрос:

Requested content-length of 4000107 is larger than the configured limit of 2097152

И он также отобразит это сообщение в веб-браузере:

<h1>Request Entity Too Large</h1>

Итак, если вы делаете сообщения формы AJAX с чем-то вроде плагина Malsup jQuery Form Plugin, вы можете перехватить ответ H1, подобный этому, и показать результат ошибки.

Между прочим, возвращается номер ошибки 413. Итак, вы можете использовать директиву в вашем файле .htaccess, например ...

Redirect 413 413.html

... и вернуть более изящный результат ошибки.

Как уже говорили другие, это невозможно с использованием только JavaScript из-за такой модели безопасности.

Если вы можете, я бы порекомендовал одно из нижеприведенных решений ... оба из которых используют флэш-компонент для проверки на стороне клиента; однако подключены с помощью Javascript / jQuery. Оба работают очень хорошо и могут использоваться с любыми серверными технологиями.

http://www.uploadify.com/

http://swfupload.org/

Невозможно проверить размер, ширину или высоту изображения на стороне клиента. Вам необходимо загрузить этот файл на сервер и использовать PHP для проверки всей этой информации. PHP имеет специальные функции, такие как: getimagesize()

list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";

Я пробовал это таким образом и получаю результаты в IE *, а Mozilla 3.6.16 не проверял в более старых версиях.

<img id = "myImage" src = "" style = "display:none;"><br>
<button onclick = "findSize();">Image Size</button>
<input type = "file" id = "loadfile" />
<input type = "button" value = "find size" onclick = "findSize()" />
<script type = "text/javascript">
function findSize() {
    if ( $.browser.msie ) {
       var a = document.getElementById('loadfile').value;
           $('#myImage').attr('src',a);
           var imgbytes = document.getElementById('myImage').size;
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           alert(imgkbytes+' KB');
    }else {
           var fileInput = $("#loadfile")[0];
           var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
                   alert(imgkbytes+' KB');
     }
}    
</script>

Также добавьте библиотеку JQuery.

Это копия моих ответов на очень похожий вопрос: Как проверить размер входного файла с помощью jQuery?

На самом деле у вас нет доступа к файловой системе (например, для чтения и записи локальных файлов). Однако из-за спецификации HTML5 File API есть некоторые свойства файла, к которым у вас есть доступ, и размер файла является одним из них.

Для этого HTML:

<input type = "file" id = "myFile" />

попробуйте следующее:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {
  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);
});

Поскольку это часть спецификации HTML5, она будет работать только для современных браузеров (для IE требуется v10), и я добавил здесь более подробную информацию и ссылки на другую информацию о файлах, которую вы должны знать: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

Поддержка старых браузеров

Имейте в виду, что старые браузеры возвращают значение null для предыдущего вызова this.files, поэтому доступ к this.files[0] вызовет исключение, и вы должны проверьте поддержку File API перед его использованием.

 $(".jq_fileUploader").change(function () {
    var fileSize = this.files[0];
    var sizeInMb = fileSize.size/1024;
    var sizeLimit= 1024*10;
    if (sizeInMb > sizeLimit) {


    }
    else {


    }
  });

Попробуйте код ниже:

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}