23

具体的には、画像用のファイル入力フィールドが 1 つ以上あるフォームを使用したいと考えています。これらのフィールドが変更されたら、データをサーバーに送信する前に、関連する画像のプレビューを表示したいと思います。

いくつかの JavaScript アプローチを試しましたが、常にセキュリティ エラーが発生します。Java やフラッシュを使用していないユーザーに対してソリューションが適切に劣化する限り、Java やフラッシュを使用してもかまいません。(彼らはプレビューを取得しませんし、迷惑な「これをインストールしてください」も取得しません。)

シンプルで再利用可能な方法でこれを行った人はいますか?

PS サンドボックスがあることは知っていますが、サンドボックスはすべての窓を閉め切った暗い施錠された部屋にある必要がありますか?

4

6 に答える 6

31

派手なものは必要ありません。必要なのはcreateObjectURL、 image として使用できる URL を作成する関数だけでsrc、ローカル ファイルから直接取得できます。

ファイル入力要素 ( <input type="file" />) を使用して、ユーザーのコンピューターからいくつかの画像を選択したとします。画像ファイルのプレビューを作成する方法は次のとおりです。

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function revokeObjectURL(url) {
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}

function myUploadOnChangeFunction() {
    if(this.files.length) {
        for(var i in this.files) {
            var src = createObjectURL(this.files[i]);
            var image = new Image();
            image.src = src;
            // Do whatever you want with your image, it's just like any other image
            // but it displays directly from the user machine, not the server!
        }
    }
}
于 2011-10-03T16:17:46.473 に答える
1

最初のステップは、イメージ パスを見つけることです。JavaScript はファイル名/パスのアップロード コントロールに問い合わせることができますが、(セキュリティ上の理由から) さまざまなブラウザーは、ユーザーに表示するものとは異なるものを JS エンジンに表示します - それらはファイル名をそのまま保持する傾向があるため、少なくとも検証することができます。その拡張子ですがc:\fake_path\、ファイル名の前に、または同様に難読化されたものを取得する場合があります。これをさまざまなブラウザーで試してみると、何が実際のパスとして返され、何がどこで偽装されるかがわかります。

2 番目のステップは、画像の表示です。ユーザーのブラウザーでスキームが許可されている場合、ソース URL をimg含むタグを介してパスがわかっている場合は、ローカルの画像を表示することができます。(Firefox はデフォルトではそうではありません。) そのため、ユーザーに画像へのフル パスを教えてもらうことができれば、少なくとも画像の読み込みを試みることができます。file://file://

于 2009-05-28T18:43:40.630 に答える
0

このアプローチを試すことはできますが、IE では機能しないようです。

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

コーディングは簡単で高速です。

ソースが死んだ場合に備えて、ここにコードを置きます。

脚本：

    <!-- Assume jQuery is loaded -->
    <script>
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            $('#img_prev')
              .attr('src', e.target.result)
              .width(150)
              .height(200);
          };

          reader.readAsDataURL(input.files[0]);
        }
      }
    </script>

HTML では:

    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
      <input type='file' onchange="readURL(this);" />
      <img id="img_prev" src="#" alt="your image" />
    </body>
于 2015-02-16T09:27:27.713 に答える
0

これは、画像をアップロードしてプレビューするための jQuery + PHP スクリプトです。

于 2009-05-28T17:39:33.143 に答える
0

JavaScript は、セキュリティ上の理由から、ローカル ファイル システムにアクセスできません。

于 2009-05-28T18:33:46.063 に答える
0

これを行う Java アプレット、たとえば Facebook の画像アップロード アプレットしか見たことがありません。Java アプローチの欠点は、ユーザーがアプレットを実行する前にそのアプレットを信頼するように求められることです。これは一種の煩わしさですが、これにより、アプレットはファイル ブラウザに画像プレビューを表示したり、ユーザーがディレクトリ全体をアップロードします。

于 2009-05-28T18:47:50.527 に答える