input type=file でファイル取得に失敗します

###現象
先日「POSTにてファイルアップロードの際ファイル名取得が失敗する」と、質問をさせていただきました。その後調べを進めていったところinput type=fileでファイルを開くダイアログからファイルを選択した後に、正常にファイル情報が戻るパターンとなにも情報が戻らない（空のデータ）パターンがありました。

・読み込みのファイルは同じファイル（txt形式）
・ファイル情報が戻らない（空のデータ）頻度は10~15回に一度ほど

ファイルが取得できない理由と対処法があればご教授を頂きたいです。

【追記】
デザインにbootstrapを使用しております
###発生している問題・エラーメッセージ

失敗時は空のデータを取得しているため、特にエラーメッセージはありませんでした

###ソースコード（HTML）

<form id="uploadForm" th:action="@{/upload/uploadForm}" method="post" enctype="multipart/form-data"> 
    <div class="input-group-addon btn btn-default btn-file" >
        <input type="file" name="upfile" id="upfile" onchange="fileuploder()"/> 
    </div>
    <div class="fileinput-filename">ファイル未選択</div><!--ここの部分にファイル名が入ります-->
</form>

###ソースコード（Javascript）

function fileuploder(){
	var obj1 = document.getElementById("upfile");
	if(!obj1.value){
		alert("ファイルを読み込みなおしてください");
	}
}

###確認環境
InrtenetExplorer 11
Chrome バージョン 58.0.3029.110 (64-bit)
Bootstrap v3.3.7

行動規範の内容に同意します

回答3件

検証してみましたが再現しませんね。
一度ファイルを選択した後に、もう一度選択しようとして、ESCキーを押してしまった、
とかやると、未選択になるので、そのようになりますけどね。（Chromeだけですが）

何か他に問題がありそうなので、スクリプトの一部だけではなく、他のところも見せてもらうことは出来ないんでしょうか？

検証コードを追加

頂いた状況をもとにコードを作ってみましたが、再現しません。
出来れば、不具合が再現できる最小のコードを書いていただけるのが一番早いと思いますが。

html
1<html lang="ja">
2<head>
3<meta charset="utf-8">
4<link href="css/bootstrap.min.css" rel="stylesheet">
5<script>
6function fileuploder(){
7    var obj1 = document.getElementById("upfile");
8    if(!obj1.value){
9        alert("ファイルを読み込みなおしてください");
10    }
11    console.log(obj1.value);
12}
13</script>
14</head>
15<body>
16</body>
17
18<div class="input-group-addon btn btn-default btn-file" >
19<input type="file" name="upfile" id="upfile" onchange="fileuploder()"/>
20</div>
21<div class="fileinput-filename">ファイル未選択</div><!--ここの部分にファイル名が入ります-->
22
23<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
24<script src="js/bootstrap.min.js"></script>
25</html>

投稿2017/05/30 09:05

編集2017/05/31 01:06

shi_ue

総合スコア4437

yambejp

2017/05/30 09:08

やはりそうですよね。私の環境でも再現しません

koppe

2017/05/31 00:26

ご検証いただきありがとうございます。その他環境としまして、デザインにbootstrapを使用しています。こちらでも今怪しいと思い調べているのがbootstrap.jsです。 input部分にbootstrapのデザインと、ファイル名の取得が絡んでいるのでその部分を掲載します <div class="input-group-addon btn btn-default btn-file" > <input type="file" name="upfile" id="upfile" onchange="fileuploder()"/> </div> <div class="fileinput-filename">ファイル未選択</div> 【bootstrap.js　バージョン】 Bootstrap v3.3.7

shi_ue

2017/05/31 00:57

他の人も分かるように、質問に追記してくださいね。

koppe

2017/05/31 01:12

失礼いたしました質問に追記いたしました。

行動規範の内容に同意します

やはり原因はわからないのですね

onchangeでfileuploder()を呼び出していますが
別途submitボタンを使って送ってもおなじでしょうか？
またブラウザを２種類書いているということは、
複数のブラウザで同様の状況という認識でよろしいでしょうか？

投稿2017/05/30 07:21

yambejp

総合スコア117667

yambejp

2017/05/30 07:28

ちなみにIEとchromeは一度選んだあと同じファイルを選んでも onchangeは走らないみたいですけどそういうことではないですよね？ firefoxだと同じファイルでもonchangeが走るみたいです。

koppe

2017/05/30 07:52

早速ご返答ありがとうございます。プログラムが抜粋で申し訳ないのですが、input=fileでファイル取得後submitでファイルを送っているのですが inputと連動して値受けているJSですでに空のデータを受けている様子なのです【失敗時】 inputで「ファイル開く」ダイアログ　⇒　ファイル選択　⇒　空のデータの戻り　【成功時】 inputで「ファイル開く」ダイアログ　⇒　ファイル選択　⇒　var obj1 = document.getElementById("upfile");　←データが入ってくる現在検証はブラウザ2種のみですが、二つとも同じ結果となっております。環境はローカルで構築した開発環境とサーバ上での本番環境にて検証しております。

koppe

2017/05/30 09:15

度々のご返答誠にありがとうございます。 onChangeはファイル読み取りの検証用に書いている部分になってます。本番のソースでは外されます。本番では <input type="file" name="upfile" id="upfile" /> やはり1回目のファイル読み込みで成功/失敗とあるので原因が不明で困窮しております。 input type=fileの失敗例は検索してもほどんと引っかからず、環境なのかinput前後の記述が問題なのか・・・

行動規範の内容に同意します

自己解決