最近、肌の乾燥が進んでいて伸びをすると違和感があったのですが、先月末にちょっと良さげな化粧水を買って付け始めたら大分乾燥を感じにくくなりました。
やっぱりいいものはいいんだな～とぼんやりと感じました。
==========================
さて、表題なのですが、HTMLのimgタグで画像以外を表示させようとする際に出るエラー用の表示をしない処理をしようとしたことがありまして、調べて出てきたネットの拾い物を大して調べもせずに使用してしまったことがあり、自分への戒めとして書こうと思います。
コードの拾い物
<input name="upload_file" type="text" onerror="this.prop('disabled', true)">おっこれで行けたやん！でMDN Web Docsで流し読みをし、エラーの時に動くやつなんやな～という理解だけして進んでしまって
その後もう一度動かしたときに、あれ？動いてない…
またMDNで調べた結果、こいつの中の”onerror”というものが非推奨の代物でした。
onerrorを削除して同じことをjQueryで行おうとしてdisabledで非表示化できると思っていたがこれがまたできない。
disableは非表示ではなく非活性らしいです。
最初から大人しく、
・imgタグのエラーが発生した場合に非表示
・初期状態と画像が読み込めた際は表示
で表示の切り替えを行えばよかったです。
最終的なimgタグ周りのコードは下記のようになりました。
// html部分
<form method="POST" action="URL" enctype="multipart/form-data">
<input type="file" name="up_file" id="up_file">
<input name="upload_file" type="text">
<img src="初期表示したい画像のURLなど" alt="画像の説明" id="preview">
</form>// jQuery部分
$(document).ready(() => {
$('#up_file').on('change', (e) => {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.currentTarget.result);
$('#preview').show();
}
reader.readAsDataURL(e.currentTarget.files[0]);
})
$('#preview').on('error', (e) => {
$(e.currentTarget).hide();
})
});おまけ
画像に限らず、ファイルをPOSTする際は以下のようにフォームにenctypeを設定しないとサーバー側にファイルが送られないことに注意！
<form method="POST" action="遷移先のURL" enctype="multipart/form-data"> </form>終わりに
ネットの拾い物を大して調べもせずにコード書いた約2か月前の自分に対して腹が立って書きなぐった感じなので、
誰かの参考に～のような感じではないですが同じことをする人を一人でも止められればと思います。
フロント側がSQL以上に苦手で、現状もCSSで時間がとられている状態なので精進していきたいです。