Отримайте розмір файлу перед завантаженням

Чи є спосіб дізнатись розмір файлу перед завантаженням файлу за допомогою AJAX / PHP в разі зміни вхідного файлу?

Для 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?

<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

Ось простий приклад отримання розміру файлу перед завантаженням. Він використовує 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 на сервер. Він включає просту перевірку розміру файлу.

У мене була та сама проблема, і, схоже, у нас не було точного рішення. Сподіваюся, це може допомогти іншим людям.

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

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

Це лише приклад коду для отримання розміру файлу. Якщо ви хочете займатися іншими справами, сміливо змінюйте код, щоб задовольнити ваші потреби.

Найкраще рішення для всіх браузерів;)

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

Браузери з підтримкою HTML5 мають властивість файлів для типу введення. Звичайно, це не буде працювати в старих версіях 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);
}

Рішення 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);
    }
}

вам потрібно зробити запит ajax HEAD, щоб отримати розмір файлу. з jquery це приблизно так

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

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

Якщо хтось хоче здійснити цю перевірку, їм слід покладатися лише на об’єкт 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;
}

Ви можете використовувати функцію розміру файлу PHP. Під час завантаження за допомогою ajax спочатку перевірте розмір файлу, зробивши запит запитом ajax до скрипта php, який перевіряє розмір файлу та повертає значення.

Ви можете, використовуючи HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Однак ви завжди повинні мати резервну копію для PHP (або будь-якої іншої бекенд-мови, яку ви використовуєте) для старих браузерів.

Особисто я б сказав відповідь Web World є найкращою сьогодні, враховуючи стандарти HTML. Якщо вам потрібно підтримати IE <10, вам потрібно буде використовувати якусь форму ActiveX. Я б уникав рекомендацій, які передбачають кодування проти Scripting.FileSystemObject або безпосереднє створення ActiveX.

У цьому випадку я мав успіх із використанням сторонніх бібліотек JS, таких як plupload, які можна налаштувати на використання елементів керування API HTML5 або Flash / Silverlight для заповнення браузерів, які їх не підтримують. Plupload має API на стороні клієнта для перевірки розміру файлу, який працює в IE <10.