はじめに
こんにちは、仙石です。
前回、サムネイル表示をする「参照ボタン」が表示されないファイルアップロードを紹介しました。
(参考: サムネイル表示をする「参照ボタン」が表示されないファイルアップロード)
今回は、ソースコードを紹介します。
リンク先は本日(2012.12.25)有効ですが、変更されている場合があります。
導入例
今回は、JavaScriptを利用することで、以下のフォームを作成します。
手順
ソースファイルの取得
image.htmlの作成
image.htmlを作成します。
headタグ内で、先に取得した２つのソースファイルと、後に作成するJavaScriptのファイルを読み込みます。
尚、hiddenにはSmartyで値を渡しています。値の受け渡しは、お使いの環境に合わせて変更を加えて下さい。
headタグ内で、先に取得した２つのソースファイルと、後に作成するJavaScriptのファイルを読み込みます。
尚、hiddenにはSmartyで値を渡しています。値の受け渡しは、お使いの環境に合わせて変更を加えて下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="ocntent-Type" content="text/html; charset=utf-8" />
<title>Image Upload</title>
<script src="/scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/scripts/ajaxupload.3.9.js" type="text/javascript"></script>
<script src="/scripts/uploadImage.js" type="text/javascript"></script>
</head>
<body>
<div class="input" style="margin-bottom:11px;padding-left:6px;">
<div id="upload" style="background-color:#EEEEEE; width:227px; height:192px; border-style:solid; border-width:1px; padding:5px;">
<div id="upload_image" style="background-color:#FFFFFF; width:215px; height:144px; border-style:solid; border-width:1px; padding:5px;">
<center>
<div id="dispImage" name="dispImage">
</div>
<div id="dispImageOld" name="dispImageOld">
</div>
</center>
</div>
<div style="padding-top:5px;">
<div style="background-color:#DDDDDD; width:215px; height:19px; padding:5px; border-style:solid; border-width:1px;">
<center>
<button class="upload" type="button" id="upload"><font size="1">アップロード</font></button>
<button class="cancel" type="button" id="cancel"><font size="1">キャンセル</font></button>
<button class="delete" type="button" id="delete"><font size="1">削除</font></button>
<input type="hidden" id="image" name="img" value="{$image|escape}" />
<input type="hidden" id="imageOld" name="imgOld" value="{$image|escape}" />
<input type="hidden" id="imgUrl" name="imgUrl" value="{$imgUrl|escape}" />
</center>
</div>
</div>
</div>
</div>
</body>
</html>
uploadImage.jsの作成
uploadImage.jsを作成し、以下のスクリプトを記述します。
image.htmlではheadタグ内で読み込んでいます。
image.htmlではheadタグ内で読み込んでいます。
jQuery(function(){
jQuery('.upload').each(function(index, btn){
var button = jQuery(btn);
var imgUrl = jQuery('#imgUrl').val();
new AjaxUpload(
button,{
action: '/index/upload',
responseType : 'json',
onSubmit : function(file , ext){
jQuery('#dispImage' ).text('Uploading ' + file);
},
onComplete : function(file, response){
if(response.code == 0) {
var img = jQuery('#image').val();
jQuery('#imageOld').val(img);
jQuery('#image').val(response.name);
jQuery('#dispImage').html('<img src="' + imgUrl + response.name + '" width="215" height="144" />');
alert(response.message);
}else if(response.code == 1) {
alert(response.message);
}else{
alert(response.message);
}
}
}
);
});
jQuery('.cancel').each(function( index, btn ){
jQuery(btn).click(function(){
var img = jQuery('#image').val();
var imgUrl = jQuery('#imgUrl').val();
var old = jQuery('#imageOld').val();
jQuery('#dispImage').html('<img src="' + imgUrl + old + '" width="215" height="144" />');
jQuery('#image').val(old);
jQuery('#imageOld').val(img);
alert("キャンセルしました");
});
});
jQuery('.delete').each(function(index, btn ){
jQuery(btn).click(function(){
var img = jQuery('#image').val();
var imgUrl = jQuery('#imgUrl').val();
jQuery('#imageOld').val(img);
jQuery('#dispImage').html('');
jQuery('#image').val('');
alert('削除しました');
});
});
});
まず、アップロードです。
id=”upload”のボタンがクリックされた時に反応します。
変数としてimgUrlにid=”imgUrl”の値(アップロードした画像へのパス)をセットします。
id=”upload”のボタンがクリックされた時に反応します。
変数としてimgUrlにid=”imgUrl”の値(アップロードした画像へのパス)をセットします。
jQuery('.upload').each(function(index, btn){
var button = jQuery(btn);
var imgUrl = jQuery('#imgUrl').val();
actionにサーバサイドでの処理を記述したファイル名をセットします。
onSubmit内の記述の結果、ウィンド内に”hoge.jpg”などと表示されます。
onCompleteまで処理が進まなかった場合、こちらの文字表示のままで停止します。
action内でロジックの誤りがないか確認する必要があります。
onSubmit内の記述の結果、ウィンド内に”hoge.jpg”などと表示されます。
onCompleteまで処理が進まなかった場合、こちらの文字表示のままで停止します。
action内でロジックの誤りがないか確認する必要があります。
new AjaxUpload(
button,{
action: '/index/upload',
responseType : 'json',
onSubmit : function(file , ext){
jQuery('#dispImage').text('Uploading ' + file);
},
actionより戻ってきた値がresponseにセットされています。
response.hogeの形で値を取り出します。
id=”image”に新しい値をセットする前に、id=”imageOld”に現在のid=”image”の値をセットしておきます。
リセットを行った時にid=”imageOld”の値とid=”image”の値を取り替えることで画像を変更することができます。
サムネイル画像が表示されるようにid=”dispImage”にactionで作成した画像ファイルへのurlをセットします。
アップロードの成否をaction内でcodeに持たせた値で判定し、メッセージ表示するようにします。
アップロードに関しては以上です。
response.hogeの形で値を取り出します。
id=”image”に新しい値をセットする前に、id=”imageOld”に現在のid=”image”の値をセットしておきます。
リセットを行った時にid=”imageOld”の値とid=”image”の値を取り替えることで画像を変更することができます。
サムネイル画像が表示されるようにid=”dispImage”にactionで作成した画像ファイルへのurlをセットします。
アップロードの成否をaction内でcodeに持たせた値で判定し、メッセージ表示するようにします。
アップロードに関しては以上です。
onComplete : function(file, response){
if(response.code == 0) {
var img = jQuery('#image').val();
jQuery('#imageOld').val(img);
jQuery('#image').val(response.name);
jQuery('#dispImage').html('<img src="' + imgUrl + response.name + '" width="215" height="144" />');
alert(response.message);
}else if(response.code == 1) {
alert(response.message);
}else{
alert('error');
}
}
}
);
次に、キャンセルです。
id=”cancel”のボタンがクリックされた時に反応します。
前述の通り、id=”image”の値とid=”imageOld”の値を交換します。
こちらの交換はid=”cancel”のボタンがクリックされる度に繰り返されます。
キャンセルに関しては以上です。
id=”cancel”のボタンがクリックされた時に反応します。
前述の通り、id=”image”の値とid=”imageOld”の値を交換します。
こちらの交換はid=”cancel”のボタンがクリックされる度に繰り返されます。
キャンセルに関しては以上です。
jQuery('.cancel').each(function( index, btn ){
jQuery(btn).click(function(){
var img = jQuery('#image').val();
var imgUrl = jQuery('#imgUrl').val();
var old = jQuery('#imageOld').val();
jQuery('#dispImage').html('<img src="' + imgUrl + old + '" width="215" height="144" />');
jQuery('#image').val(old);
jQuery('#imageOld').val(img);
alert("キャンセルしました");
});
});
最後に、削除です。
id=”delete”のボタンがクリックされた時に反応します。
キャンセルできるようにid=”image”の値をid=”imageOld”にセットします。
id=”image”及びid=”dispImage”の値は空にします。
削除に関しては以上です。
id=”delete”のボタンがクリックされた時に反応します。
キャンセルできるようにid=”image”の値をid=”imageOld”にセットします。
id=”image”及びid=”dispImage”の値は空にします。
削除に関しては以上です。
jQuery('.delete').each(function(index, btn ){
jQuery(btn).click(function(){
var img = jQuery('#image').val();
var imgUrl = jQuery('#imgUrl').val();
jQuery('#imageOld').val(img);
jQuery('#image').val('');
jQuery('#dispImage').html('');
alert('削除しました');
});
});
upload.phpの作成
サーバサイドで、POSTされてきたデータを受け取り操作するプログラムを作成します。
upload.php内のスクリプトは以下のようになります。
upload.php内のスクリプトは以下のようになります。
if ( isset($_FILES['userfile']['name']) && !empty($_FILES['userfile']['name']) ) {
$fileName = $_FILES['userfile']['name'];
$tmpFile = $_FILES['userfile']['tmp_name'];
if ( empty($tmpFile) ) {
return false;
}
list($name, $ext) = explode('.', $fileName);
$newFileName = uniqid() . '.' . $ext;
$newFile = "img/{$newFileName}";
touch($newFile);
if ( $newFile !== false ) {
chmod($newFile, 0757);
}
if ( is_uploaded_file($tmpFile) ) {
move_uploaded_file($tmpFile, $newFile);
}
if ( empty($newFile) ) {
$code = 1;
$message = "ファイルのアップロードに失敗しました。";
} else {
$code = 0;
$message = "ファイルのアップロードに成功しました。";
}
$retArray = array(
"code" => $code,
"name" => $newFileName,
"message" => $message,
);
print( json_encode( $retArray ) );
} else {
echo 'error';
return;
}
まず、アップロードした画像ファイルの情報を取得します。
画像の名前、現在あるファイル、拡張子をそれぞれ取得します。
画像の名前、現在あるファイル、拡張子をそれぞれ取得します。
$fileName = $_FILES['userfile']['name'];
$tmpFile = $_FILES['userfile']['tmp_name'];
if ( empty($tmpFile) ) {
return false;
}
list($name, $ext) = explode('.', $fileName);
$newFileName = uniqid() . '.' . $ext;
権限の変更、及び一時ファイルの移動を行います。
$newFile = "img/{$newFileName}";
touch($newFile);
if ( $newFile !== false ) {
chmod($newFile, 0757);
}
if ( is_uploaded_file($tmpFile) ) {
move_uploaded_file($tmpFile, $newFile);
}
最後にアップロードの成否を確認し、戻り値をセットします。
$messageにはalertで表示する文言をセットします。
upload.phpに関しては以上です。
$messageにはalertで表示する文言をセットします。
upload.phpに関しては以上です。
if ( empty($newFile) ) {
$code = 1;
$message = "ファイルのアップロードに失敗しました。";
} else {
$code = 0;
$message = "ファイルのアップロードに成功しました。";
}
$retArray = array(
"code" => $code,
"name" => $newFileName,
"message" => $message,
);
以上です。
試してみて下さい。
