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

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

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

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

ОТВЕТЫ

Ответ 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] приведет к возникновению исключения, и вы должны проверить поддержку Файлового API перед его использованием

Ответ 2

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

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

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

Ответ 4

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

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

Ответ 5

Я обнаружил, что 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

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

Ответ 6

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


    }
    else {


    }
  });

Ответ 7

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

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

http://www.uploadify.com/

http://swfupload.org/

Ответ 8

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

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