10

私はフォーラムをオンラインでモデレートするのを手伝っています。このフォーラムでは、署名のサイズを制限しています。現時点では、私が書いた簡単な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で確認できるようにしたいと思います。代わりに、これらすべてをスキャンするバッチスクリプトを作成することもできますが、現在のスクリプトを拡張する方法があるかどうか疑問に思っています。

4

10 に答える 10

5

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

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

JSONを使用してファイルのHTTPヘッダーを読み取り、実際のファイルサイズを表示します。これは、人々が大きなアニメーションGIFをアップロードするのを防ぐのに役立つはずです。

寸法の取得について：

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

もちろん、これはサーバー側で最も適切に処理されるものへの純粋なクライアント側のアプローチです。

于 2009-07-14T17:48:58.800 に答える
5

実際、HTML5では、これが可能になりました。
詳細については、こちらをご覧ください。

于 2012-06-28T09:14:05.787 に答える
3

簡単に言えば、できません

また、jGuruをチェックする入力タイプがファイルのフォームでJavaScriptからファイルサイズをチェックするにはどうすればよいですか？

あなたはいくつかの重要なポイントを見つけるでしょう

答えは非常に単純ですが、できません。

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

于 2009-07-14T17:49:58.220 に答える
2

サーバー側の検証は常により良い方法ですが、あなたの場合、なぜこのクライアント側を実行したいかがわかります。

また、他の人が質問を読み間違えた可能性があり、ダニエルがテストしたい画像がすでにアップロードされているようです。その場合、かなり簡単な方法があります（画像がスクリプトと同じドメインにある場合） 。

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が同じXMLRPCドメイン制限を共有しているかどうかはわかりませんが、必要な画像ファイルがスクリプトとは異なるドメインにある場合は、iframeマジックの使用を検討する必要があるかもしれません。

于 2009-07-14T18:46:29.917 に答える
1

クライアント側の検証では、目標を達成するには不十分です。簡単なPOSTリクエストにより、ユーザーは、提供するhtmlまたはjavascriptに関係なく、必要な画像をアップロードできます。

于 2009-07-14T17:50:39.483 に答える
0

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/を参照してください。

于 2009-07-14T17:47:24.980 に答える
0

DOM属性img.fileSizeは、参照される<img>の実際のファイルサイズを返します。imgオブジェクトへのアクセスは、JQueryまたはDOMの「画像」コレクションを使用して取得できます。ただし、これはIEのみの拡張機能です。

もう1つの方法は、<img>タグのheight属性とwidth属性を省略して、画像全体がダウンロードされるようにし、img.heightとimg.widthを使用してダウンロードされた画像のサイズを決定することです。このコードは、誰かに署名をHTMLとして入力させてから、署名のプレビューを表示するまでの中間ステップとして、ユーザーのプロファイルエディターページに配置できます。不格好な、私は認めなければなりませんが、可能です。

于 2009-07-14T17:50:01.560 に答える
0

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

Facebookは、アップロードされた画像のほとんどに対してこれを実行するため、適度なサイズの画像が提供されます。場合によっては、それらをpng形式に変換することさえあります。これは、「品質の低下」のためにクリエイティブグループのナッツを駆り立てます。

于 2009-07-14T17:58:28.843 に答える
0

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

詳細はこちら。

于 2009-07-14T18:45:21.587 に答える
0

あなたはそのファイルを行うことができますHTML5JSファイルAPI

私のWebIDEで以下のコードをテスト実行できます（ただし、google chromeまたはFFを使用してください）： http ：//codesocialist.com/#/？s = bN

以下のコードは、ファイルタイプとファイルサイズを取得します:)

<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.');
}
于 2012-06-26T04:54:33.860 に答える