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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

http://www.uploadify.com/

http://swfupload.org/

Answer 5

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

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

Answer 6

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

Это копия из моих ответов на очень похожий вопрос: How to check file input size with 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) и Я добавил here более подробную информацию и ссылки на другие сведения о файле, которые вы должны знать: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

Старые браузеры поддерживают

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

Answer 8

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


    } 
    else { 


    } 
    });