写真を選択して表示させたいが、表示できない。

Question

タイトルを押しても写真が表示されないです。
選択はできるのですが、どう改善すれば良いでしょうか？
アドバイスくださると嬉しいです。

HTML

<input type="file" id="image-id" accept="image/*;capture=camera">
<label for="image-id" class="imageBox">
    <span class="title">タイトル</span>
</label>

CSS

input[type="file"] {
    display: none;
}

label.imageBox {
    position: relative;
    width: 200px;
    height: 200px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: block;
}
label.imageBox > span.title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

javascript

$(document).ready(function () {
    $(document).on("click", "input[type='file']", function () {
        var id = $(this).attr("id");
        $("#" + id + " + label").css("background-image", "");
        $(this).val("");
    });
    $(document).on("change", "input[type='file']", function () {
        var id = $(this).attr("id");
        $("#" + id + " + label").css("background-image", "");
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) {
            return;
        }

        if (/^image/.test(files[0].type.toLowerCase())) {
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onloadend = function () {
                $("#" + id + " + label").css("background-image", "url(" + this.result + ")");
            };
        }
    });
});

Answer 1

私の環境では問題なく動いてますよー！画像表示されています。
もしかしてjQuery読み込むの忘れていませんか？

• 動作確認用サンプル：https://jsfiddle.net/uda34yg6/2/

あとは、画面をクリックしたらファイルを開くより、四角形を押したらにしたほうがいいのかなぁと思いました。

-    $(document).on("click", "input[type='file']", function () {
+    $('#image-id').on("click", "input[type='file']", function () {

Comments

[Cocode]

MacのChromeと、iPhoneのSafariで確認しましたが、きちんと四角形の枠の中に画像が表示されていました。