8

サーバー側のコンポーネントを使用せずに、コンピューターから任意の js オブジェクトに画像ファイルを直接ロードしたいと考えています。たとえば、ローカル マシンから画像を選択して Web ページに表示したいとします。サーバーへのファイルのアップロードを回避する方法はありますか?

実際、一種の複数の画像ローダーを作成したいのですが、サーバーにロードする前にいくつかの画像を回転させ、ユーザー ID、画像ファイル名リストなどのデータを含む xml ファイルを作成し、すべての画像とこの xml を圧縮したいと考えています。そしてそれをサーバーに送信します。クライアント側でそれを行うにはどうすればよいですか？

4

3 に答える 3

16

HTML5 を使用する方法はありますが、ユーザーがファイルをドロップ ターゲットにドロップするか、<input type="file"/>ボックスを使用する必要があります。そうしないと、セキュリティ上の問題が発生するためです。

API を使用するFileと、ファイルを読み取ることができます。具体的には、FileReader.readAsDataURLメソッドを使用してコンテンツをdata:イメージ タグの URL として設定できます。

次に例を示します。

$('#f').on('change', function(ev) {
    var f = ev.target.files[0];
    var fr = new FileReader();

    fr.onload = function(ev2) {
        console.dir(ev2);
        $('#i').attr('src', ev2.target.result);
    };

    fr.readAsDataURL(f);
});​

http://jsfiddle.net/alnitak/Qszjg/

于 2012-07-22T20:18:43.407 に答える
2

新しいファイルAPIを使用すると、ローカルディスクからコンテンツにアクセスできます。

ページに従来の<input type="file">アップロードフィールドを配置し、onchangeイベントを処理します。

MDNには、すべての詳細が記載された優れた記事があります。

イベントハンドラーは、FileListを含むを取得しFilesます。そこから、を呼び出しFileReader.readAsDataURL(File)て画像のコンテンツをフェッチし、そのデータURLを<img>またはに渡して<canvas>回転を行うことができます。

于 2012-07-22T20:24:17.913 に答える
2

window.URL オブジェクトのcreateObjectURLメソッドを使用できますが、ブラウザのサポートはあまりありません。

http://jsfiddle.net/LvAqp/は chrome と firefox でのみ動作します

于 2012-07-22T20:30:14.477 に答える