Gist
状態:-
閲覧数:2,124
投稿日:2015-04-02
更新日:2015-04-02
画像ファイルが存在すれば表示
・存在しなければ非表示
HTML5 イベントハンドラ属性を使用することで対応可能
onerror 属性
・イベントハンドラ属性の一つ
・当該要素の処理に際してエラーが発生した際のイベント処理を指定
→ 「エラー発生時」 というイベントに対して、この属性値に指定された処理を実施
実装例
・画像読込エラーの場合は指定画像表示
・存在しなければ非表示
対応
HTML5 イベントハンドラ属性を使用することで対応可能
onerror 属性
・イベントハンドラ属性の一つ
・当該要素の処理に際してエラーが発生した際のイベント処理を指定
→ 「エラー発生時」 というイベントに対して、この属性値に指定された処理を実施
実装例
・画像読込エラーの場合は指定画像表示
<img src="<?php echo $targetPath; ?>" alt="" onerror="this.src='/images/noimage.jpg';">
調査履歴
当初予定
ファイル存在確認後、条件分岐
・file_exists()関数で、ファイル存在確認後、条件分岐しようと考えていた
問題発生
いざコーディング開始してみると
・パスは正しいのに期待した通り条件分岐しないことに気が付く
・ファイル存在しているのに全く認識してくれない
調査した結果判明した事実
・セーフモードではファイル操作系関数が使用不可
・getimagesize関数とか色々試すも、全滅
セーフモード環境下でのファイル存在確認
・こんなに難易度高いとは夢にも思わなかったよ
CGIモードへは変更したくない
・CGIモードへ変更すれば動作することは分かっているが、他への影響を考慮すると変更したくない
JSでファイル確認
最初に試した方法
・目的は達成できたが、コンソールにエラーが表示されまくっている
<script>
function filesize (url) {
// http://kevin.vanzonneveld.net
// + original by: Enrique Gonzalez
// + input by: Jani Hartikainen
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: T. Wild
// % note 1: This function uses XmlHttpRequest and cannot retrieve resource from different domain.
// % note 1: Synchronous so may lock up browser, mainly here for study purposes.
// * example 1: filesize('http://kevin.vanzonneveld.net/pj_test_supportfile_1.htm');
// * returns 1: '3'
var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
if (!req) {
throw new Error('XMLHttpRequest not supported');
}
req.open('HEAD', url, false);
req.send(null);
if (!req.getResponseHeader) {
try {
throw new Error('No getResponseHeader!');
} catch (e) {
return false;
}
} else if (!req.getResponseHeader('Content-Length')) {
try {
throw new Error('No Content-Length!');
} catch (e2) {
return false;
}
} else {
return req.getResponseHeader('Content-Length');
}
}
</script>
<td>
<?php $targetPath = "/img/".$user['img_sample2']; ?>
<script>
var gazou = "<?php echo $targetPath; ?>";
imgsize = filesize(gazou);
if(imgsize >300) {
document.write('<a href="<?php echo $this->escape($user['url']); ?>"><img src="<?php echo $targetPath; ?>" alt=""></a>');
}
</script>
</td>