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

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

ただいまの
回答率

90.86%

  • JavaScript

    14234questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5978questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    4965questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Firefox

    183questions

    Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

FireFoxで画像ファイルを読み込みJavaScriptで操作したいが読み込みができる前に動作してしまう

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 720

kutu

score 182

https://teratail.com/questions/61153

で質問したことを調査してもう少しわかったので再度質問させていただきます
出来ればサンプルソース等でお教えいただけるとありがたいです

FireFox(PCでもスマートフォンでも)でフォームからファイル選択をし、画像ファイルを選択 
その後、そのファイルのデータを利用しての処理を行いたいが 
うまくいかない

var file = $(this).prop('files')[0];
var fr = new FileReader();
fr.onload = function() {
    $('img#image').attr('src', fr.result);
    img = new Image();
    img.src = fr.result;

    if(img.width > 0){
        ooooo();
    }
};
fr.readAsDataURL(file);

上記のようなソースにしている。 
Webkitで行った場合、 
img 
に正常にデータが入り、ooooo()が動作するのだが 
FireFoxの場合imgがnullになる場合が多々ある(正常に動作する場合もある)

なお
img.src = fr.result; 
の前の行に 
alert(1); 
などのように 
・alertを表示 
・OKをクリックでアラートを消す 
とした場合、100%正常動作した

これらの理由や対策分かる方いらっしゃいますでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • SurferOnWww

    2017/01/08 13:04

    今さらながらですが、前のスレッド 61153 を見ましたが 、私の答えと同じ内容の答えがあってベストアンサーマークがつけてありますが・・・ そうすると、下の私の回答も理解されないような気がしますが、どうでしょう?

    キャンセル

回答 2

+4

FileReaderオブジェクトを使った画像の選択、表示は次のように行うことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>
<body>
<input type="file" id="fileUpload">
<img src="#" id="uploadImage" alt="アップロード">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#fileUpload").on("change", function () {
            let fileReader = new FileReader();
            fileReader.onload = function (e) {
                $('#uploadImage').attr('src', e.target.result);
            };
            fileReader.readAsDataURL(this.files[0]);
        });
    });
</script>
</body>
</html>

追記

Image()を使うことでwidth, heightが取得できると思いますが。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>
<body>
<input type="file" id="fileUpload">
<img src="#" id="uploadImage" alt="アップロード">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#fileUpload").on("change", function () {
            let fileReader = new FileReader();
            fileReader.onload = function () {
                let image = new Image();
                image.src = fileReader.result;//読み込まれたファイルの内容
                image.onload = function () {
                    alert(image.width + " : " + image.height);
                    $('#uploadImage').attr("src", image.src);//画像のURLをソースに設定
                };
            };
            fileReader.readAsDataURL(this.files[0]);
        });
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/09 23:26

    画像の選択、表示
    を行いたいというよりは
    画像情報が正確に取得できていないんですよ
    その理由がわからなくて・・

    キャンセル

  • 2017/01/10 22:54

    追記しましたコードをfirefoxで動かしましたが、画像の幅や高さが取得できない状態は確認できませんでした。質問文にあるコードに詳しい記述がないので断定はできませんが、ooooo関数に何か問題がある可能性もあるのではないかと思います。

    キャンセル

checkベストアンサー

+3

うまくいかないのは、width を取得しようとしている時点では、画像データの読み込みが完了してないからでしょう。

src に設定した画像データの読み込みが完了すると、image.onload イベントが発生するので、そのハンドラで処置を行うとうまくいくと思います。

***** 2017/1/10 14:15 追記 *****

2017/01/10 14:08 の私のコメントで書きましたようにコード例をアップしておきます。コピペすれば動くはずなのでお試しください。これと質問者さんのやりらいことが違う場合は、どこだどのように違うか具体的に書いてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
        // HTML5 File API の FileReader を利用して <input type="file"... /> で選択
        // された画像ファイルを読み込み、その画像の Data url 形式文字列を取得。
        // それを image オブジェクトの src 属性に設定する。その際 image.onload イベ
        // ントが発生するのでそのイベントにリスナをアタッチ。そのリスナの中で image
        // オブジェクトが保持する画像のサイズを取得する。

        // 以下の 3 行はそのための準備
        var fileReader;
        var image = new Image();
        image.onload = DrawImageOnCanvas;

        // document の読み込み完了後に { } 内の処置を行う
        $(function () {
            // ブラウザの HTML5 File API サポートを確認
            if (window.File && window.FileReader && window.FileList) {
                fileReader = new FileReader();

                // FileReader オブジェクトに画像を読み込むメソッド readAsDataURL は
                // 非同期で動くので、読み込み完了のイベント onloadend を待って、その
                // リスナで FileReader から Data url を取得し image オブジェクトの
                // src 属性に設定する。
                fileReader.onloadend = function () {
                    image.src = fileReader.result;
                };

                // <input type="file"... /> でファイルの選択が完了すると change
                // イベントが発生するのでそれにリスナをアタッチし処置を行う。
                $("#fileupload").change(function () {
                    var fileUpload = document.getElementById("fileupload");

                    // fileReader オブジェクトに <input type="file"... /> で選択
                    // された画像ファイルを読み込む
                    fileReader.readAsDataURL(fileUpload.files[0]);
                });
            } else {
                $('#result').text('File API がサポートされてません。');
            }
        });

        // 上で定義した image オブジェクトの src 属性に Data url が設定されると発生
        // する onload イベントのリスナ
        function DrawImageOnCanvas() {
            // オリジナル画像のサイズ
            var w = image.width;
            var h = image.height;

            $('#result').text('width: ' + w + ', height: ' + h);
        }          
    //]]>
    </script>
</head>
<body>
    <input id="fileupload" type="file" />
    <div id="result"></div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/09 23:28

    はい、正直どこの部分に
    image.onload
    をどのように差し込めばよいのかがわかりません。
    ```
    img = new Image();
    img.src = fr.result;
    img.onload = function(){
    if(img.width > 0){
    ooooo();
    }
    }
    ```
    で良いのでしょうか?

    キャンセル

  • 2017/01/10 01:12

    それをやってみてどうなりました? ダメだったのではないかと想像していますが・・・

    であれば、以下の記事のコードが参考になりませんか?

    canvas の画像をアップロード
    http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

    キャンセル

  • 2017/01/10 14:08

    HTML5 File API の FileReader を利用して <input type="file"... /> で選択された画像ファイルを読み込み、オリジナル画像のサイズを取得するまでを、上に紹介した記事からその目的に不要な部分を削除して作ったので、ご参考にそれを回答欄にアップしておきます。コピペすれば動くはずなのでお試しください。これと質問者さんのやりらいことが違う場合は、どこだどのように違うか具体的に書いてください。

    キャンセル

  • 2017/01/11 12:35

    教えていただいた方法でうまくいきました
    ありがとうございます。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    14234questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5978questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    4965questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Firefox

    183questions

    Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ