6

ファイル型のhtml入力要素からJavaScript/jQueryを使用してバイナリ画像データを取得する方法（可能であれば）を調査したり、理解しようとしたりするときに問題が発生しました。

私はWebMatrix（C＃）を使用していますが、この質問の目的がJavaScript / jQueryのみを使用して回答できる場合は、それを知る必要はないかもしれません。

画像を取得してデータベースに（バイナリデータとして）保存し、投稿後にバイナリデータからページに写真を表示することができます。ただし、これにより、アップロードする前に写真のプレビューが表示されなくなります。そのため、AJAXを使用する必要があるとほぼ確信しています。

繰り返しになりますが、これは不可能かもしれませんが、バイナリイメージデータを取得できる限り、AJAXを使用してサーバーにプッシュし、データベースから取得した場合と同じようにイメージを処理できると思います（ GUIDを使用して画像ファイル自体を保存するのではなく、バイナリデータを保存するだけであることに注意してください）。

input要素を使用して写真のプレビューを表示する簡単な方法がある場合は、もちろんそれでも問題ありません。これを実行しようとする私の背後にある全体的なアイデアは、フォームの送信ボタンを押す前に写真のプレビューを表示することです（または少なくともその幻想を作成します）。

** * *******更新**** ** * **** _ _ _ _

私の本当の質問は次のとおりなので、これを別の質問の複製とは見なしません。

JavaScript / jQueryを使用して、入力タイプ「ファイル」から画像データを取得するにはどうすればよいですか？

データを（正しい形式で）サーバーに戻すことができれば、そこで作業してからAJAXで返すことができるはずです（ただし、私はAJAXの専門家ではありません）。

私が行った調査によると、JavaScriptのみを使用してすべてのIEバージョンで画像プレビューを取得する方法はありません（これは、完全なファイルパスを取得することが潜在的なセキュリティリスクと見なされるためです）。ユーザーにサイトを信頼できるサイトに追加するように依頼することもできますが、通常、ユーザーにそのような設定を改ざんするように依頼することはありません（ユーザーにサイトを疑わしいと思わせる最も簡単な方法は、ユーザーに直接依頼することです。信頼できるサイトのリストにサイトを追加します。これは、メールを送信してパスワードを要求するようなものです。「私を信じてください。私はとても安全です！」:)

4

1 に答える 1

4

簡単な答え: jQuery フォーム プラグインを使用します。ファイルのアップロードでも AJAX のようなフォームの送信がサポートされます。

tl;dr

サムネイル プレビューは、人気のある Web サイトであり、通常、いくつかの手順で行われます。基本的に、Web サイトは次の手順を実行します。

  1. RAW画像をアップロードする
  2. データ ストレージ用に画像のサイズを変更して最適化する
  3. そのファイルへの一時的なリンクを生成します (通常、サーバーが維持する HTTP セッションに保存されます)。
  4. 「プレビュー」を有効にするために、ユーザーに送り返します
  5. ユーザーが画像を確認した後、実際に画像を保存する

いくつかの悪い解決策は次のとおりです。

  1. 最新のブラウザのほとんどには、ローカル ファイルへのスクリプト アクセスを有効にするオプションがありますが、通常、これらの低レベルの設定をいじるようにユーザーに要求することはありません。
  2. 以前の Internet Explorer (ああ...残念です) と最新のブラウザーの古いバージョンは、ファイル入力ボックスの「値」を読み取ることで完全なファイル パスを公開します。これにより、タグを直接生成してその値を使用できます。(現在は c:/fakepath/... のものに置き換えられています。)
  3. Adobe Flash を使用してファイル選択パネルを模倣すると、ローカル ファイルを適切に読み取ることができます。しかし、それを JavaScript に渡すことは別のトピックです...

これらが役立つことを願っています。;)

アップデート

実際にアップロードする前にプレビューが必要な状況に遭遇したので、ここにも入れたいと思います。FileReader私が思い出したように、最新のブラウザーには、実際のファイル パスをマスクする前に実装されていない移行バージョンはありませんでしたが、そうであれば、遠慮なく修正してください。このソリューションは、jQuery でサポートされている限り、ほとんどのブラウザーに対応する必要があります。

// 1. Listen to change event
$(':file').change(function() {
  // 2. Check if it has the FileReader class
  if (!this.files) {
    // 2.1. Old enough to assume a real path
    setPreview(this.value);
  }
  else {
    // 2.2. Read the file content.
    var reader = new FileReader();

    reader.onload = function() {
      setPreview(reader.result);
    };

    reader.readAsDataURL();
  }
});

function setPreview(url) {
  // Do preview things.
  $('.preview').attr('src', url);
}
于 2012-11-01T19:04:01.913 に答える