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%正常動作した
これらの理由や対策分かる方いらっしゃいますでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
FileReaderオブジェクトを使った画像の選択、表示は次のように行うことができます。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<input type="file" id="fileUpload"> 9<img src="#" id="uploadImage" alt="アップロード"> 10<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 11<script> 12 $(document).ready(function () { 13 $("#fileUpload").on("change", function () { 14 let fileReader = new FileReader(); 15 fileReader.onload = function (e) { 16 $('#uploadImage').attr('src', e.target.result); 17 }; 18 fileReader.readAsDataURL(this.files[0]); 19 }); 20 }); 21</script> 22</body> 23</html>
追記
Image()を使うことでwidth, heightが取得できると思いますが。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<input type="file" id="fileUpload"> 9<img src="#" id="uploadImage" alt="アップロード"> 10<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 11<script> 12 $(document).ready(function () { 13 $("#fileUpload").on("change", function () { 14 let fileReader = new FileReader(); 15 fileReader.onload = function () { 16 let image = new Image(); 17 image.src = fileReader.result;//読み込まれたファイルの内容 18 image.onload = function () { 19 alert(image.width + " : " + image.height); 20 $('#uploadImage').attr("src", image.src);//画像のURLをソースに設定 21 }; 22 }; 23 fileReader.readAsDataURL(this.files[0]); 24 }); 25 }); 26</script> 27</body> 28</html>
投稿2017/01/08 00:52
編集2017/01/09 21:00総合スコア14731
0
ベストアンサー
うまくいかないのは、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/08 03:06
編集2017/01/10 05:13退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/09 14:28
退会済みユーザー
2017/01/09 16:12
退会済みユーザー
2017/01/10 05:08
2017/01/11 03:35
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。