3

画像をアップロードするための次の html コードがあります。

<input type="file" name="before"  size="40">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">

バックエンドで実際に処理される前に、ユーザーがアップロードした画像を表示したいと思います。どうすればいいですか？

基本的に私がやりたいことは、コンピューターの画像から画像をアップロードし、それを表示して、jCrop を使用してトリミングし、バックエンドで画像を処理できるようにすることです。

4

3 に答える 3

1
  • 通常のようにポストバックにファイルを保存します
  • ポストバック中
    • ページ上の画像へのリンクを追加
    • 画像の処理を処理するために別のページを呼び出す'onload'にjavascriptを追加します
于 2011-08-15T18:27:31.327 に答える
0

必要なのはHTML5 File APIです。readAsDataURLを見てください。

基本的に、 でonchangeイベントをキャッチしinput[type="file"]、関連付けられたファイルを でロードしてからFileReader、画像コンテンツを<img href="data" />. より明確な情報はこちら.

于 2011-08-15T18:22:43.300 に答える
0

送信するまでアップロードしているファイルを見ることができないため、サーバーで何らかの処理を行わずに回避するつもりはないと思います。ただし、Ajax を介して何かを試みることはできます。jQuery Form PluginとFile Uploads exampleに出くわしました。

サイトからコピーして貼り付けます：

ブラウザの XMLHttpRequest オブジェクトを使用してファイルをアップロードすることはできないため、フォーム プラグインは非表示の iframe 要素を使用してタスクを支援します。これは一般的な手法ですが、固有の制限があります。iframe 要素は、フォームの送信操作のターゲットとして使用されます。これは、サーバーの応答が iframe に書き込まれることを意味します。これは、応答の種類が HTML または XML の場合は問題ありませんが、応答の種類がスクリプトまたは JSON の場合はうまく機能しません。どちらにも、HTML マークアップで見つかった場合にエンティティ参照を使用して表現する必要がある文字が含まれていることがよくあります。

スクリプトと JSON 応答の課題を説明するために、フォーム プラグインでは、これらの応答を textarea 要素に埋め込むことができます。ファイルのアップロードと組み合わせて使用​​する場合は、これらの応答の種類に対してこれを行うことをお勧めします。ただし、フォームにファイル入力がない場合、リクエストは通常​​の XHR を使用してフォームを送信します (iframe ではありません)。これにより、テキストエリアをいつ使用し、いつ使用しないかを知るというサーバー コードの負担が大きくなります。必要に応じて、プラグインの iframe オプションを使用して、常に iframe モードを使用するように強制できます。これにより、サーバーは常に応答をテキストエリアに埋め込むことができます。

于 2011-08-15T19:07:16.907 に答える