Есть ли способ узнать размер файла перед загрузкой файла с помощью AJAX / PHP в случае изменения входного файла?
javascript
jquery
ajax
file-upload
filesize
Нисант Кумар
источник
источник
Ответы:
Для 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?
источник
FileList.files
представляет собой массивFile
объектов, являющийся расширениемGlob
. И, согласно спецификации ,Glob
действительно определяетsize
свойство как количество байтов (0 для пустого файла). Так что да, результат в байтах .<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>
источник
У меня была такая же проблема, и похоже, что у нас нет точного решения. Надеюсь, это поможет другим людям.
Потратив время на изучение, я наконец нашел ответ. Это мой код для прикрепления файла с помощью 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; }
источник
$(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>
источник
Браузеры с поддержкой 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); }
источник
Решение 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, которые можно настроить для использования HTML5 apis или элементов управления Flash / Silverlight для заполнения браузеров, которые их не поддерживают. Plupload имеет клиентский API для проверки размера файла, который работает в IE <10.
источник