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

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

ОТВЕТЫ

Ответ 1

Ниже приведен ниже текст

<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?

Ответ 2

<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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

Лучшее решение для всех браузеров;)

function GetFileSize(fileid) {
 try {
 var fileSize = 0;
 //for IE
 if(checkIE()) {//we could use this $.browser.msie but since it depracted 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 kb
 fileSize = fileSize / 1048576; //size in mb 
 }
 //for FF, Safari, Opeara and Others
 else {
 fileSize = $("#" + fileid)[0].files[0].size //size in kb
 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;
}

Ответ 6

Браузеры с поддержкой 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);
}

Ответ 7

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

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

Ответ 8

Решение 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 kb
        fileSize = fileSize / 1048576; //size in mb 
    }
        //for FF, Safari, Opeara and Others
    else {
        fileSize = $("#" + fileid)[0].files[0].size //size in kb
        fileSize = fileSize / 1048576; //size in mb 
    }
    return (fileSize < 2.0);
}
catch (e) {
    alert("Error is :" + e);
}
}

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

Пожалуйста, не используйте 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;
}