質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

javascriptでfromのfileで選択された画像などの表示・非表示について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,000

zak

score 35

http://hakuhin.jp/js/blob_url_scheme.html#BLOB_URL_SCHEME_00

上サイトを参考にして
フォームのfileで選択された画像などをjavascriptのBlob URL Schemeを使って表示しているのですが、
この方法ですと最初からimgタグの枠(?)が表示されています。

イメージ説明

この枠(?)を消すことはできないでしょうか?

また、一度画像を選択した後に
もう一度「ファイルを選択」をクリックしてキャンセルをすると、
ファイルは選択されていないのに画像は表示されたままになってしまいます。
この表示されたままの画像も消すことはできないでしょうか?

よろしくお願いします。

○追記

<input type="file" id="input_01_file"  accept="image/bmp,image/gif,image/jpeg,image/png" /><br />
Blob URL Scheme:<br>
<input id="edit_01_result" size="40" disabled /><br>
画像:<br>
<img src="" id="image_01" >

<script type="text/javascript">
<!--
// 匿名関数内で実行
(function (){

    var blob_url = null;

    // 各エレメントを取得
    var element_file = document.getElementById("input_01_file");
    var element_result = document.getElementById("edit_01_result");
    var image = document.getElementById("image_01");

    // ------------------------------------------------------------
    // サポート状況
    // ------------------------------------------------------------
    if(!window.File){
        element_result.value = "File クラスに対応していません。";
        return;
    }
    if(!window.URL){
        element_result.value = "Blob URL Scheme に対応していません。";
        return;
    }

    // ------------------------------------------------------------
    // 値が変化した時に実行されるイベント
    // ------------------------------------------------------------
    element_file.addEventListener("change" , function(e){

        // ファイルが選択されたか
        if(!(element_file.value)) {
            image.src = undefined;
            return;
        }

        // ------------------------------------------------------------
        // File オブジェクトを取得(HTML5 世代)
        // ------------------------------------------------------------
        // ファイルリストを取得
        var file_list = element_file.files;
        if(!file_list) return;

        // 0 番目の File オブジェクトを取得
        var file = file_list[0];
        if(!file) return;

        // ------------------------------------------------------------
        // Blob URL Scheme を生成
        // ------------------------------------------------------------
        blob_url = window.URL.createObjectURL(file);

        // 画像を読み込む
        image.src = blob_url;
        image.width = 100;
        image.height = 100;

        // 結果を表示
        element_result.value = blob_url;
    });

})();
//-->
</script>

img要素の枠はこちらのcssのミスでした。申し訳ありません。

○syuilo様のご回答を参考にして修正したソース

<input type="file" id="input_01_file"  accept="image/bmp,image/gif,image/jpeg,image/png" /><br />
Blob URL Scheme:<br>
<input id="edit_01_result" size="40" disabled /><br>
画像:<br>
<script type="text/javascript">
<!--
// imgタグ表示
function Image_Write() {
    document.write("<img src='' id='image_01' >");
}


// 匿名関数内で実行
(function() {

    var blob_url = null;

    // 各エレメントを取得
    var element_file = document.getElementById("input_01_file");
    var element_result = document.getElementById("edit_01_result");

    // ------------------------------------------------------------
    // サポート状況
    // ------------------------------------------------------------
    if(!window.File){
        element_result.value = "File クラスに対応していません。";
        return;
    }
    if(!window.URL){
        element_result.value = "Blob URL Scheme に対応していません。";
        return;
    }

    // ------------------------------------------------------------
    // 値が変化した時に実行されるイベント
    // ------------------------------------------------------------
    element_file.addEventListener("change" , function(e){

        // ファイルが選択されたか
        if(element_file.value) {
            // imgタグ表示
            Image_Write();
        } else {
            return;
        }

        var image = document.getElementById("image_01");

        // ------------------------------------------------------------
        // File オブジェクトを取得(HTML5 世代)
        // ------------------------------------------------------------
        // ファイルリストを取得
        var file_list = element_file.files;
        if(!file_list) return;

        // 0 番目の File オブジェクトを取得
        var file = file_list[0];
        if(!file) return;

        // ------------------------------------------------------------
        // Blob URL Scheme を生成
        // ------------------------------------------------------------
        blob_url = window.URL.createObjectURL(file);

        // 画像を読み込む
        image.src = blob_url;
        image.width = 100;
        image.height = 100;

        // 結果を表示
        element_result.value = blob_url;
    });

})();
//-->
</script>

このソースでは、ファイルを選択した後に画像のみが表示されるようになってしまいます。
初心者なのでどのように修正すれば良いかわかりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/09/18 12:46

    書かれている状況が再現するコード(HTML/CSS/jsなど)か、再現するURLを提示されたほうが回答を得やすいと思います。

    キャンセル

  • zak

    2016/09/18 13:23

    ありがとうございます。
    ソースを追加しました。

    キャンセル

  • kei344

    2016/09/18 15:08

    追記のコードについて、「画像のみが表示される」とは何が表示されている予定なのでしょうか。

    キャンセル

  • zak

    2016/09/18 16:05

    fromが消えて画像のみが表示されていました。
    日本語下手で申し訳ありません。

    キャンセル

回答 1

checkベストアンサー

+2

この枠(?)を消すことはできないでしょうか?

画像が選択されるまではimg要素を置かなければ大丈夫です。

この表示されたままの画像も消すことはできないでしょうか?

ファイルの選択が解除された場合でもイベントは発生しますので、その時にファイルがundefinedならimg要素を削除すればいけます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/18 15:21

    もしかしたらdocument.writeが原因かも?

    キャンセル

  • 2016/09/18 15:25

    document.writeは使わずに、代わりにdocument.createElementまたはinnerHTMLプロパティを利用してみてください。

    キャンセル

  • 2016/09/18 16:01

    ご回答ありがとうございます。
    innerHTMLでうまくいきました。
    ベストアンサーにさせていただきます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る