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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

1回答

1691閲覧

cntを数えてくれない

rms398

総合スコア50

JavaScript

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

0グッド

0クリップ

投稿2017/05/22 08:57

###前提・実現したいこと
動画をアップロードする機能を作っています
動画がいくつあるかcntで数えて0だったらファイル選択ボタンを表示するというのをしたいのですが、console.logでたしかに通ったのにcntがプラスされませんでした。
###該当するソースコード

javascript

1 var cnt = 0;//カウント変数 2 //送るファイル全てに対してのループ処理 3 filesArray.forEach(function(file) { 4 var formData = new FormData(); 5 //フォームデータにkey:fileでファイルの関連付け 6 formData.append('file',file); 7 //フォームデータにkey:tagでファイルの関連付け 8 formData.append('tag',document.forms.form1.tagselect.value); 9 console.log(formData.get('tag')); 10 //フォームデータをフォームデータ一時保存配列に保持 11 formDataArray.push(formData); 12 //FileReaderのインスタンス作成 13 var reader = new FileReader(); 14 //読み込み処理を行った際、一度だけ実行 15 $(reader).one('load',function(event){ 16 //MIMEタイプの最初から5文字取得 imageとvideoとその他を分けるため 17 var type = file.type.slice(0,5); 18 if(!(type == 'video')){ 19 window.alert('動画以外の形式です、動画をアップロードしましょう。'); 20 formData.delete('file'); 21 }else{ 22 cnt++;//ここでカウントする 23 console.log('通りましたよ'); 24 //fileViewに動画追加 25 //サムネイル風になる 26 $('#fileView').append('<div class="view-contaier"> <div> <video src="' + event.target.result + '"></div> <span> 動画 </span> </div>'); 27 } 28 }); 29 //DataURLでファイルを読み込む 30 reader.readAsDataURL(file); 31 //アップロード処理 32 //uploadFiles(formData); 33 }, this); 34 if(cnt == 0){ 35 //動画を隠す 36 $('#fileView').hide(); 37 window.alert('動画はありませんでした'); 38 //選択ボタンを表示 39 $('#file').show(); 40 41 } 42

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記処理は非同期で行われるため、if(cnt == 0){} が必ず実行されます。

JavaScript

1$(reader).one('load',function(event){});

if(!(type == 'video')){} の中で if(cnt == 0){} を判別して表示/非表示を切り替えるのが良いでしょう。
「最後」の動画かどうかは、別途何個目を処理しているかをカウントして判断するのが手っ取り早いと思います。

投稿2017/05/22 09:11

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rms398

2017/05/22 09:29 編集

ありがとうございます。 $(function(){ //フォームデータを一時保存する配列 var formDataArray = []; var cnt = 0; //inputによってファイルが読み込まれた時に呼ばれる $('#file').on('change', function () { //入力されたファイル取得 var files = this.files; //読み込み処理 readFiles(files);//カウントするのがあるfunction if(cnt == 0){ //画像を隠す $('#fileView').hide(); window.alert('動画は何もありませんでした'); //選択ボタンを表示  $('#file').show(); } }); こうすれば直ると思いましたがやっぱり直ってませんでした 申し訳ございません
kei344

2017/05/22 09:36

readFiles(files);の中でファイルを非同期ロードしているのだったら、同じことです。 提示した修正方法に沿ってもう一度考えてみてください。
rms398

2017/05/22 10:57

試してみたところ ちゃんとカウントしてくれました! ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問