inputラベル画像を取得して表示

4353 ワード

以前、バックグラウンドからアイテム外の画像を取得し、フロントエンドで表示する方法を書いたことがあります.
Base64Encoder.encode(byte[] buffer);

しかし、今日問題がありました.
しかし、inputタグをクリックしてファイルを選択すると、パス値はC:fakepathtestとなる.jpgでは,中間の経路がfakepathに置き換えられ,以下のように解析される.
理由:
ブラウザのセキュリティメカニズムのため、input fileのパスを取得するとfakepathに置き換えられ、実際の物理パスが隠されます.もちろん、ブラウザのブラウザセキュリティ設定を調整すると、次のような問題を解決できます.IEの設定:ツール->インターネットオプション->セキュリティ->カスタムレベル->その他の「ローカルファイルをサーバにアップロードするときにローカルディレクトリパスを含める」を見つけ、「有効化」を選択すればよいが、この解決策は明らかに望ましくないため、ブラウザのセキュリティオプションをすべて設定することはできない.
解決方法:
ダイレクトコード
<script type="text/javascript">
    var file=$("#file");
    file.change(function () {
        $("#image").attr("src",getObjectURL(file[0].files[0]));
    });
    function getObjectURL(file) {
        var url = null;
       /* window.URL = window.URL || window.webkitURL;*/

        if (window.createObjcectURL != undefined) {
            url = window.createOjcectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

fileオブジェクトはinputです
返されるurlは、http%3 A//localhost%3 A 8083/2 ff 77702-8153-4174-a 354-05 a 92 c 2 c 0534
このバイナリオブジェクトをimgラベルに割り当てるsrc属性を表示できます
知識:
        URL.createObjectURL()メソッドは、入力されたパラメータに基づいて、作成されたこのドキュメントにのみ存在するパラメータオブジェクトを指すURLを作成します.新しいオブジェクトURLは、実行されるFileオブジェクトまたはBlobオブジェクトを指します.
構文:objcetURL=window.URL.createObjectURL(file || blob);
パラメータ:FileオブジェクトとBlobオブジェクト;Fileオブジェクトはファイルです.例えば、file type=「file」タブでファイルをアップロードすると、中の各ファイルはfileオブジェクトになります.Blobオブジェクトは、XMLHttpRequestなどのバイナリデータであり、requestTypeをblobと指定すると、返される値もblobオブジェクトです.
createObjectURLを呼び出すたびに、新しいURLオブジェクトが作成されます.同じファイルにURLを作成してもこのオブジェクトを必要としない場合は、それを解放するにはURLを使用する必要があります.revokeObjectURL()メソッド.ページが閉じられると、ブラウザは自動的に解放されますが、パフォーマンスとメモリの使用を最適化するために、使用しなくなったことを確認するときは解放する必要があります.