JavaScriptでファイルサイズを確認するにはどうすればよいですか？

Question

私はオンラインフォーラムを適度にするのに役立ちます。このフォーラムでは、署名のサイズを制限しています。現時点では私が書いた簡単なGreasemonkeyスクリプトを使ってこれをテストしています。我々は<div>ですべての署名をラップし、スクリプトはそれを探して、divの高さと幅を測定します。

すべてのスクリプトは、署名が特定の高さ/幅に存在することを確認しています。署名の中にある画像のファイルサイズを自動的に測定したいので、巨大な画像を署名しているユーザーに自動的にフラグを付けることができます。しかし、私はページに読み込まれた画像のサイズを測定する方法を見つけることができないようです。私は検索し、IE（element.fileSize）に特有のプロパティを見つけましたが、明らかに私のGreasemonkeyスクリプトでは使用できません。

JavaScriptを使用してFirefoxで画像のファイルサイズを調べる方法はありますか？

編集：人々は問題を誤解しています。フォーラム自体はイメージをホストしません。人々が署名として入力するBBCodeをホストします。たとえば、人々はこれを入力します：

This is my signature, check out my [url=http://google.com]awesome website[/url]! 
This image is cool! [img]http://image.gif[/img] 

私はこれらの画像をGreasemonkeyでチェックしたいと考えています。代わりにこれらのすべてをスキャンするバッチスクリプトを書くことができましたが、現在のスクリプトを拡張する方法があるかどうかは不思議です。

Answer 1

短い答え、あなたが、あなたはいくつかの重要なポイント

を見つけるでしょうJGuruの How can you check the file size from JavaScript in a form with an input type of file?

にチェックしない

また

できる答えは非常に簡単ですさて、あなたがすることはできません。

理由：ブラウザのセキュリティでは、 （Javascript/VBScript）のスクリプト、またはアプレットとActiveXコントロールでも、ローカルハードディスクから ファイルを読み取ることができません。あなたのコード が何らかの認証局（CA）によって署名されている場合にのみ、ファイルを読むことができます。現在、入力タイプ "FILE"にもファイルを読み取る権限がありません。私たちは そのことについては何もできません。したがって、 ファイルを読み取ることができないため、入力されたファイルのサイズが見つからない タグが関連付けられています。ファイルサイズを見つけることができないので、ファイルサイズを返すためにJavaScript/VBScriptによって公開される関数は ではありません。しかし あなたがファイルサイズを見つける必要がある場合、あなたのウェブサーバにアップロードされたファイルのサイズ を制限するために言いなさい。その後、ユーザーが をサーバーに送信すると、サーバー側でファイルの内容を数えて とすることができます。無料の電子メールプロバイダの多くが www.hotmail.comのようなことは何ですか。

Answer 2

ファイルをアップロードするHTMLで最大ファイルサイズを設定できます。

<input type="hidden" name="MAX_FILE_SIZE" value="10000000"> 

（max_file_sizeバイト）。

ただし、これは一部のブラウザの「文書化されていない/サポートされていない」項目です。アップロードされたサーバー上のファイルサイズを実際に確認することをお勧めします。

また、FlashまたはJavaアプレットを使用してアップロードを処理し、ファイルサイズを確認することもできます。例については、http://www.masrizal.com/product/custom%20tag/cf_flashmultiupload/docs%20&%20examples/example.cfmおよびhttp://www.saschawenning.de/labor/flash8/fileUpload/を参照してください。

Answer 3

IEは、画像のfileSizeプロパティをサポートしています。他のブラウザではそのような運ません...しかし、あなたは、このスクリプトを変更することができるはずです。

http://natbat.net/2008/Aug/27/addSizes/

これは、ファイルのHTTPヘッダを読み、彼らの実際のファイルサイズを表示するには、JSONを使用しています。これは、人々が大きなアニメーションGIFをアップロードするのを防ぐのに役立ちます。寸法を取得するためとして

：もちろん

var img = new Image(); 
theImage.src = "someimage.jpg"; 
actualwidth = theImage.width; 
actualheight = theImage.height; 

これは何かのベスト扱わサーバー側への純粋なクライアント側のアプローチです。

Answer 4

DOM属性img.fileSizeは、<というimg >の実際のファイルサイズを返します。 imgオブジェクトへのアクセスは、JQueryまたはDOMの 'images'コレクションを使用して取得できます。しかし、これはIEのみの拡張です。

<タグのheight属性とwidth属性を省略して完全なイメージをダウンロードし、img.heightとimg.widthを使用してダウンロードしたイメージのサイズを決定する方法もあります。このコードは、誰かがHTMLとして署名を入力してから、その署名のプレビューを表示するという中間的なステップとして、ユーザーのプロファイルエディタページに挿入できます。 Clunky、私は認めなければならないが、可能である。

Answer 5

クライアント側の検証では、目標を達成するには不十分です。シンプルな投稿要求は、あなたがそれらを提供しているHTMLやjavascriptに関係なく、ユーザーが望む任意のイメージをアップロードできるようにします。

Answer 6

あなたが巨大な画像を心配している場合、Richy C.が述べたように最大アップロードサイズを設定するだけでなく、アップロードされた画像をサーバー上でサイズ変更し、サイズ変更されたバージョンを使用します。

Facebookはアップロードされた画像の大半についてこれを行い、適度なサイズの画像が提供されるようにします。いくつか（ほとんどの場合）でpng形式に変換しても、「品質の低下」のためにクリエイティブなグループナットを駆動します。

Answer 7

イメージURLのAJAX HEADリクエストは、コンテンツよりもファイルのヘッダーを取得するので、はるかに高速です。あなたが返すヘッダーの1つはContent-Lengthで、これはイメージのサイズをバイト単位で示します。

さらにdetails here。

Answer 8

サーバ側の検証は常により良い方法ですが、あなたのケースでは、なぜこのクライアント側をやりたいのか分かります。

また、他の人が質問を誤読している可能性があり、ダニエルがテストしたい画像が既にアップロードされていると思われます。この場合、画像は同じドメインにあるスクリプトとして）。

var getFileSize = function(address, responseHandler) { 
    var req = new XMLHttpRequest(); 

    req.open('head', address, true); 
    req.onreadystatechange = responseHandler; 
    req.send(null); 
} 

var responseHandler = function(resp) { 
    if (this.readyState == 1) { 
    this.abort(); 
    } 
    console.log(this.getResponseHeader("Content-length")); 
}; 

getFileSize("http://stackoverflow.com/content/img/so/logo.png", responseHandler); 

ブーム。この例はFF3と恐らく2で動作します。これを行うためにGreasemonkeyを使用しているので、ブラウザの互換性は問題のようには見えません。

Greasemonkeyが同じXML RPCドメイン制限を共有しているのかどうかは分かりませんが、必要なイメージファイルがスクリプトと異なるドメインにある場合は、iframeの魔法を使用する必要があります。 http://codesocialist.com/#/?s=bN

以下のコードファイルタイプを取得する：あなたは、そのファイルHTML5 JSファイルのAPIに

を行うことができます

Answer 9

あなたは私のWeb IDEで以下のコードは、（ただし、GoogleのクロムやFFを使用してください）を実行しテストすることができますそしてあなたのためのファイルサイズ:)

<input type="file" id="files" name="files[]" multiple /> 
<output id="list"></output> 

// Check for the various File API support. 
if (window.File && window.FileReader && window.FileList && window.Blob) { 

    // Great success! All the File APIs are supported. 
    function handleFileSelect(evt) { 
     var files = evt.target.files; // FileList object 

     // files is a FileList of File objects. List some properties. 
     var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes </strong></li>'); 
     } 

     document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
    } 

    // Bind Event Listener 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 

} else { 
    alert('The File APIs are not fully supported in this browser.'); 
} 

Answer 10

は実際に、HTML5で、これが可能になりました、
は、より多くの情報hereをお読みください。