PHP 「ファイルを選択」から画像選択時に選択した画像ファイルをブラウザに表示させたい

PHPを使っててサービスを開発しています。

今回実装したいのが
http://4meee.com/の「記事を書く」というページ先にある、
![イメージ説明]WIDTH:457
といった「ファイルを選択」するボタンがあります。
ここで「ファイルを選択」するとすぐさま、ブラウザに選択した画像が表示されます。

このような機能を作りたいのですが、PHPだけで出来ますでしょうか？
Ajax等を用いているのでしょうか？

何かアドバイス等ありましたらご教授宜しくお願いします。

行動規範の内容に同意します

回答3件

私はjQueryのpluginで

https://blueimp.github.io/jQuery-File-Upload/

をよく使います。
緑のボタン[+Add files]で画像を指定してみてください。

ファイルを指定すると一旦サーバに（phpで）保存します。
保存したURLを返すようにしてimgのsrcに設定するとご希望の動作になるかと思います。

投稿2015/06/27 01:01

packet1024

総合スコア342

K_T_T_K

2015/06/27 09:01

jQuery-File-Upload知りませんでした。ありがとうございます！ jQuery-File-Uploadも使ってみました！実現したい処理が実現できました！ありがとうございました！

行動規範の内容に同意します

ベストアンサー

古いブラウザではできませんが、「readAsDataURL」を用いればクライアントサイドだけでできるかもです。

サンプルHTML＋javascript

lang
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="utf-8"> 
5  <title>TEST</title>
6</head>
7<body style='text-align:center;'>
8
9<div id='boxImage'>ここに画像が入ります</div>
10<hr>
11<input type='file' value='' id='selectImage'>
12
13<script>
14var elm = document.getElementById("selectImage");
15elm.onchange = function(evt){
16  var selectFiles = evt.target.files;
17  if(selectFiles.length != 0) {
18    var fr = new FileReader();
19    fr.readAsDataURL(selectFiles[0]);
20    fr.onload = function(evt) {
21      document.getElementById('boxImage').innerHTML = '<img src="' + fr.result + '" alt="" style="min-width:250px;min-height:250px;max-width:250px;max-height:250px;border:1px solid #666;">'; //readAsDataURLで得た結果を、srcに入れたimg要素を生成して挿入
22    }
23  }
24}
25</script>
26
27</body>
28</html>