ブラウザで画像を選択したら、非同期でアップロードして画像を表示したくて使いました。
配布サイト
ここ(Ajax Upload)
最新版は完全に作り直されたらしくて、「File Upload」って名前に変わってます。
これも色々と試したみたのですが、UI周りのカスタマイズがいまいち分からなかった。
オプション設定で、template、fileTemplate、classesの当たりを設定すれば良さそう何だけど、
ドキュメントも少ないし、心が折れてあきらめました。
その点、旧バージョンのajaxuploadはiframeとか使って怪しいけど、素直で使いやすいです。
- $(function(){
- new AjaxUpload('file1', {
- action: 'upload.php',
- name: 'PostName',
- data: {paramA: 'valueA' ,paramB:'valueB'},
- onComplete: function(file, response) {
- var ret = eval( '(' + response + ')' );
- if( ret.success ){
- $('#imageArea').attr('src', ret.path);
- }
- }
- });
-
- );
$(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);
//オプションパラメータの受取
$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);