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

Question

На PHP у них есть способ ограничить размер файла ПОСЛЕ загрузки, но не ДО ПЕРЕД загрузки. Для отправки формы я использую Malsup jQuery Form Plugin , и он поддерживает отправку файла изображения.

Мне было интересно, есть ли ограничение, где я могу указать, сколько байтов может проходить через этот поток AJAX на сервер? Это может позволить мне проверить этот размер файла и вернуть ошибку, если файл слишком большой.

Делая это на стороне клиента, он блокирует тех новичков, которые делают снимок размером 10 МБ со своего Pentax и пытаются загрузить его.

Answer 1

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

---

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

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

---

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

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

Answer 2

Я не думаю, что это возможно, если вы не используете Flash, ActiveX или Java-загрузчик.

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

Answer 3

Я попробовал это таким образом, и я получаю результаты в 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.

Answer 4

Я обнаружил, что 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, вы можете перехватить ответ H1, подобный этому, и показать результат ошибки.

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

Redirect 413 413.html

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

Answer 5

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

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

Answer 6

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


    }
    else {


    }
  });

Answer 7

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

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

http://www.uploadify.com/

http://swfupload.org/

Answer 8

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

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

Answer 9

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

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