フォームから画像アップロード時のプレビュー表示で複数INPUTする場合

画像アップロードフォームからアップロードした画像のプレビューを表示させています。
画像inputの数すべてに対応させたいので
質問1.
クリックした要素#file_xxxを取得して#file_imgと入れ替えたい
file_img部分がクリックしたIDとなるように記述するにはどうすればいいのでしょうか？

質問2.
画像ファイル以外はプレビュー表示しないように
file.type.indexOf('image') < 0
などを使用してプレビューを表示しないようにするにはどのように記述するのでしょうか？

<script>
    $(document).on("change", "#file_img", function (e) {
    var reader;

    if (e.target.files.length) {
        reader = new FileReader();

        // 画像ファイル以外は処理停止


        reader.onload = function (e) {
        var userThumbnail;
        userThumbnail = document.getElementById('thumbnail');
        $("#userImgPreview").addClass("is-active");
        userThumbnail.setAttribute('src', e.target.result);
        };

        return reader.readAsDataURL(e.target.files[0]);
    }
    });
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

質問1.
クリックした要素#file_xxxを取得して#file_imgと入れ替えたい
file_img部分がクリックしたIDとなるように記述するにはどうすればいいのでしょうか？

「idが"file_"から始まるINPUT要素」という意味のセレクタを使ってください。
以下のようなコードになります。

javascript
1$("INPUT[id=^'file_']").on("click", function(e) {
2	console.log(e.target.id + " がクリックされました。");
3});

質問2.
画像ファイル以外はプレビュー表示しないように
file.type.indexOf('image') < 0
などを使用してプレビューを表示しないようにするにはどのように記述するのでしょうか？

以下のような記述になります。

javascript
1$("INPUT[id^='file_']").on("change", function(e) {
2	var file = e.target.files[0];
3	if(file.type.indexOf('image') < 0){
4		alert("画像ファイルを指定してください。");
5		return false;
6	}
7
8	// プレビュー表示処理
9});