Получите размер файла перед загрузкой

91

Есть ли способ узнать размер файла перед загрузкой файла с помощью AJAX / PHP в случае изменения входного файла?

Нисант Кумар
источник
2
и, очевидно, дубликат stackoverflow.com/search?q=file+size+before+upload
Ваш здравый смысл
Вот пошаговое руководство по получению имени, типа и размера файла codepedia.info/…
Сатиндер Сингх
Возможный дубликат проверки размера загружаемого файла JavaScript
Фрэнк Тан

Ответы:

134

Для 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);

});

См. Следующий поток:

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

Brij
источник
1
Разве массив файлов не существует в Internet Explorer (более старые версии)?
Тьяго Сезар Оливейра
4
Да, это не работает до IE 10 и частично поддерживается в Android и iOS. caniuse.com/fileapi . Если бы это было так просто ...
Стикс
2
Полагаю, результат в байтах?
Эрдал Г.
4
@ErdalG. Хороший вопрос! В MDN отсутствует документация, но он FileList.filesпредставляет собой массив Fileобъектов, являющийся расширением Glob. И, согласно спецификации , Globдействительно определяет sizeсвойство как количество байтов (0 для пустого файла). Так что да, результат в байтах .
Джон Вайс
14
<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

Работа над IE и FF

Бехнам Бахши
источник
15
Проголосовали против, поскольку в ответе используется ActiveX. в 2015 году даже Microsoft отказывается от ActiveX. Хотя это было разумное предложение, я бы рекомендовал разработчикам избегать этого сейчас и в будущем.
Скотт Стоун
3
Мне нравится это решение, потому что только старые версии IE вернут true для window.ActiveXObject.
Роб Брейдекер
@scottstone Я не понимаю, почему вы проголосовали против всех ответов, поддерживающих устаревшие браузеры? Этот ответ намного чище, чем те, которые используют отпечатки пальцев браузера, и никоим образом не рекомендуют никому использовать ActiveX.
Николя Бувретт
@NicolasBouvrette - Я согласен, что этот ответ намного чище, чем другие, но я не могу удалить отрицательный голос на данный момент. Исходный вопрос не требовал совместимости со старыми версиями IE, и этот ответ не сообщает читателям, что большая часть кода предназначена для поддержки версий IE 5+ летней давности.
Скот камень
@scottstone На самом деле, еще один важный момент, с моей точки зрения, почему не использовать ActiveX, заключается в том, что он отображает предупреждающее сообщение в IE, что ужасно (страшно?) для пользователя.
Николя Бувретт
13

Вот простой пример получения размера файла перед загрузкой. Он использует jQuery для обнаружения, когда содержимое добавляется или изменяется, но вы все равно можете получить files[0].sizeбез использования jQuery.

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

Вот более полный пример, некоторые доказательства концептуального кода для перетаскивания файлов в FormData и загрузки через POST на сервер. Он включает простую проверку размера файла.

зубчатый
источник
8

У меня была такая же проблема, и похоже, что у нас нет точного решения. Надеюсь, это поможет другим людям.

Потратив время на изучение, я наконец нашел ответ. Это мой код для прикрепления файла с помощью jQuery:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

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

Хоанг Ле
источник
Мне это нравится, потому что его не нужно добавлять в событие изменения, как самое популярное решение. И мне также нравится тот факт, что вы разрешили мне изменить код, чтобы удовлетворить мои потребности :)
Мэтт
8

Лучшее решение, работающее во всех браузерах;)

function GetFileSize(fileid) {
    try {
        var fileSize = 0;
        // for IE
        if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        alert("Uploaded File Size is" + fileSize + "MB");
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

из http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

ОБНОВЛЕНИЕ: мы будем использовать эту функцию, чтобы проверить, является ли это браузер IE или нет

function checkIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    } else {
        // If another browser, return 0
        alert('otherbrowser');
    }

    return false;
}
усефх
источник
3
Проголосовали против, потому что в ответе используется ActiveX. в 2015 году даже Microsoft отказывается от ActiveX. Хотя это было разумное предложение, я бы рекомендовал разработчикам избегать этого сейчас и в будущем. -
Скотт Стоун
1
$ .browser был удален из jQuery в версии 1.9 (не рекомендуется с версии 1.3).
Сильвио Дельгадо
2
@scottstone это для обратной Compability и это не так Microsoft не будет Abdon ActiveX это гораздо используется во многих вещах , и вот доказательство computerworld.com/article/2481188/internet/...
ucefkh
@SilvioDelgado Изменил и обновил, они удалили $ .browser в плагин, поэтому нам понадобится только небольшой тест для браузера IE (работает со всеми версиями)
ucefkh
4

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

вишай жесткий
источник
3

Браузеры с поддержкой HTML5 имеют свойство files для типа ввода. Это, конечно, не будет работать в более старых версиях IE.

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);
}
Сандип Джи
источник
2

Решение ucefkh сработало лучше всего, но поскольку $ .browser устарел в jQuery 1.91, пришлось изменить использование navigator.userAgent:

function IsFileSizeOk(fileid) {
    try {
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) {
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}
Майк
источник
1

вам нужно выполнить запрос ajax HEAD, чтобы получить размер файла. с jquery это примерно так

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });
каспер тайманс
источник
Но если это сделать, ввод файла будет очищен (пуст) ?? Можете ли вы привести пример благодарности?
ДеЛе
1

Пожалуйста, не используйте его, так ActiveXкак есть вероятность, что он отобразит страшное предупреждающее сообщение в Internet Explorer и отпугнет ваших пользователей.

Предупреждение ActiveX

Если кто-то хочет реализовать эту проверку, он должен полагаться только на объект FileList, доступный в современных браузерах, и полагаться на проверки на стороне сервера только для старых браузеров ( прогрессивное улучшение ).

function getFileSize(fileInputElement){
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) {
        // File size is undefined.
        return undefined;
    }

    return fileInputElement.files[0].size;
}
Николя Бувретт
источник
0

Вы можете использовать функцию размера файла PHP. Во время загрузки с использованием ajax сначала проверьте размер файла, отправив запрос ajax-запрос к сценарию php, который проверяет размер файла и возвращает значение.

Речи
источник
0

Вы можете использовать HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Однако у вас всегда должен быть запасной вариант для PHP (или любого другого используемого вами серверного языка) для старых браузеров.

Хосе П. Айроса
источник
0

Лично я бы сказал ответ Web World - лучший сегодня, учитывая стандарты HTML. Если вам нужна поддержка IE <10, вам нужно будет использовать некоторую форму ActiveX. Я бы избегал рекомендаций, связанных с написанием кода против Scripting.FileSystemObject или созданием экземпляров ActiveX напрямую.

В этом случае мне удалось использовать сторонние библиотеки JS, такие как plupload, которые можно настроить для использования HTML5 apis или элементов управления Flash / Silverlight для заполнения браузеров, которые их не поддерживают. Plupload имеет клиентский API для проверки размера файла, который работает в IE <10.

Скотт Стоун
источник