ajaxuploadを使った。

ブラウザで画像を選択したら、非同期でアップロードして画像を表示したくて使いました。
配布サイトここ(Ajax Upload)

最新版は完全に作り直されたらしくて、「File Upload」って名前に変わってます。
これも色々と試したみたのですが、UI周りのカスタマイズがいまいち分からなかった。

オプション設定で、template、fileTemplate、classesの当たりを設定すれば良さそう何だけど、
ドキュメントも少ないし、心が折れてあきらめました。

その点、旧バージョンのajaxuploadはiframeとか使って怪しいけど、素直で使いやすいです。

$(function(){
 new AjaxUpload('file1', { //input type="file"のid
  action: 'upload.php', //POSTを処理するphp
  name: 'PostName',  //phpで$_FILES['PostName']と使う。
  data: {paramA: 'valueA' ,paramB:'valueB'},  //オプションのデータ。$_POSTで渡される
  onComplete: function(file, response) {   //アップロード完了時のコールバック
   var ret = eval( '(' + response + ')' );  //JSONの展開
   if( ret.success ){
    $('#imageArea').attr('src', ret.path); //イメージの設定
   }
  }
 });

);

PHP側はこんな感じです。

//オプションパラメータの受取
$param = $_POST['paramA'];
$ret = null;
$uploaddir = 'D:\\upload\\';
$filename = basename($_FILES['PostName']['name'])
$uploadfile = $uploaddir . $filename;

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
 $ret = array('success'=>true,'path'=>'/images/' . $filename);
} else {
 $ret = array('success'=>false);
}
echo htmlspecialchars(json_encode($ret), ENT_NOQUOTES);