html5の File API を使って、アップロード無しで画像プレビュー - 超自己満足プログラミング画像をプレビューするために、サーバへアップロードする必要がなくなります*1。 html fileのアップロードフォームにonchangeを仕込んでおきます。 あとは、プレビュー表示用の要素だけ準備。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="file" name="file" onchange="preview(this)" /> </form> <hr /> <b>preview:</b><br /> <div id="preview_field"></div> </body> </html> javascript function preview(ele) { if (!ele.files.length) return; // ファイル未選択 var f
