ajaxuploadを使った。

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

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

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

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

view plainprint?

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

$(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側はこんな感じです。

view plainprint?

1. //オプションパラメータの受取  
2. $param = $_POST['paramA'];  
3. $ret = null;  
4. $uploaddir = 'D:\\upload\\';  
5. $filename = basename($_FILES['PostName']['name'])  
6. $uploadfile = $uploaddir . $filename;  
7.   
8. if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {  
9.  $ret = array('success'=>true,'path'=>'/images/' . $filename);  
10. } else {  
11.  $ret = array('success'=>false);  
12. }  
13. echo htmlspecialchars(json_encode($ret), ENT_NOQUOTES);  

//オプションパラメータの受取
$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);