cosian.com

jQuery 画像選択時に、画像を表示するJS(ワイルドカード対応)

2020-06-24

system

$("[class^=sub_post_img]").change(function(e){
var
str = $(this).attr("class"),
num = str.match(/\d/g).join("");
var file = e.target.files[0];
var reader = new FileReader();

if(file.type.indexOf("image") < 0){
alert("画像ファイルを指定してください。");
return false;
}
reader.onload = (function(file){
return function(e){
$(".sub_post_view" num).show();
$(".sub_post_view" num).attr("src", e.target.result);
$(".sub_post_view" num).attr("title", file.name);
};
})(file);
reader.readAsDataURL(file);
});

画像アップロードのフォームで、画像ファイルをすぐに確認するためのJavascriptで、よく見かけるやつです。
1行目の
[class^=sub_post_img]
はワイルドカード対応で、.sub_post_img1など連番の時に利用します。画像アップロードが少ないフォームの場合は、直接クラス名を入れて対応したほうが早いです。

2行目の
var str = $(this).attr("class"),num = str.match(/\d/g).join("");
クラス名を取得し、そのクラス名の連番を取得し変数numに格納しています。
表示するときにクラスを指定しますが、その際に利用する変数です。

ざっくりとこんな感じで、現在(2020年6月24日)のシステムでは利用していますが、複数画像をアップするときにPHPかMySQLの容量オーバーが起こるので、次のシステムからはファイル選択と同時にAjaxのPOST処理でサーバにアップしておく仕様に変更しました。

コメントを書く
コメント
お名前