アップロードする前にファイルサイズを取得する


89

入力ファイルの変更イベントでAJAX / PHPを使用してファイルをアップロードする前にファイルサイズを確認する方法はありますか?




これは、ファイル名、タイプ、サイズを取得するためのステップバイステップチュートリアルです。codepedia.info/…
Satinder sing

回答:


132

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でファイルの入力サイズを確認するにはどうすればよいですか?


1
Internet Explorer(古いバージョン)にファイル配列が存在しませんか?
ティアゴセザールオリヴェイラ

4
はい、これはIE 10より前では機能せず、androidとiosで部分的にしかサポートされていません。caniuse.com/fileapi。これだけ簡単だったら...
スタイクス

2
結果はバイト単位だと思いますか?
Erdal G. 2016

4
@ErdalG。良い質問!MDNにはドキュメントがありませんが、の拡張であるオブジェクトのFileList.files配列のようなものFileですGlob。そして仕様よるとGlob実際にはsizeプロパティをバイト数として定義します(空のファイルの場合は0)。つまり、結果はバイト単位です。
John Weisz 2017年

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を放棄しています。与えられたときそれは合理的な提案でしたが、私は開発者に現在および将来これを避けることをお勧めします。
スコットストーン2015

3
古いバージョンのIEのみがwindow.ActiveXObjectに対してtrueを返すため、このソリューションが好きです。
Rob Breidecker

@scottstoneレガシーブラウザをサポートするすべての回答に反対票を投じた理由がわかりませんか?この回答は、ブラウザの指紋を使用する回答よりもはるかに明確であり、ActiveXの使用を推奨するものではありません。
Nicolas Bouvrette、2017年

@NicolasBouvrette-この回答は他の回答よりもはるかに明確であることに同意しますが、この時点では反対投票を削除することはできません。元の質問は古いバージョンのIEとの互換性を求めていませんでした。この回答は、5年以上前の古いバージョンのIEをサポートするためにコードのほとんどが存在することを読者にアドバイスしていません。
スコットストーン2017

@scottstone ActiveXを使用しない理由についての私の実感の1つは、IEで警告メッセージを表示することです。これは、恐ろしい(怖い)ユーザーエクスペリエンスです。
Nicolas Bouvrette、2017

13

アップロードする前にファイルのサイズを取得する簡単な例を次に示します。コンテンツが追加または変更されるたびにjQueryを使用して検出しますが、files[0].sizejQueryを使用しなくても取得できます。

$(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);

これは、ファイルサイズを取得するためのサンプルコードです。他のことをしたい場合は、必要に応じてコードを変更してください。


最も人気のあるソリューションのように変更イベントに配置する必要がないため、これが好きです。そして、あなたが私のニーズを満たすためにコードを変更する許可をあなたにくれたという事実も気に入っています:)
Matt

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から

UPDATE: この関数を使用して、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は、バージョン1.9でjQueryから削除されました(v 1.3以降非推奨)。
Silvio Delgado

2
@scottstoneこれは後方compabilityのためのものであり、それは真実ではない、マイクロソフト、それは非常に多くのことに使用することであり、ここでは証明されていない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をサポートするブラウザには、入力タイプのファイルプロパティがあります。もちろん、これは古いバージョンの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のソリューションは最適に機能しましたが、jQuery 1.91では$ .browserが廃止されたため、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"));
    }
  });

しかし、そのファイル入力がクリア(空)になる場合は?? 例を挙げてありがとう
DeLe

1

ActiveXInternet 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を使用したアップロード中に、ファイルサイズをチェックして値を返すPHPスクリプトへのajaxリクエストをリクエストして、最初にファイルサイズを確認してください。



0

個人的には、HTML標準を考えると、Web Worldの答えは今日のところ最高です。IE <10をサポートする必要がある場合は、何らかの形式のActiveXを使用する必要があります。Scripting.FileSystemObjectに対するコーディング、またはActiveXを直接インスタンス化することを含む推奨事項は避けます。

この場合、HTML5 APIまたはFlash / Silverlightコントロールを使用してそれらをサポートしないブラウザーをバックフィルするように構成できるpluploadなどのサードパーティJSライブラリを使用して成功しました。Pluploadには、IE <10で機能するファイルサイズをチェックするためのクライアント側APIがあります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.