javascript Jqueryでサムネイルを表示したいがFILE APIがiOSの時だけ動かない

FILE APIを使用して画像のサムネイルを表示するプログラムを作成していますがスマートフォンでは作動しません。（正確には2回ファイルを指定すると作動する）

PCでは1回目から動きますが、スマートフォンを使用した時は2回ファイルを指定すると画像が表示されますが、1回目からは表示されません。プログラムで修正すべき点が何かありますでしょうか。

スマートフォンのiosのバージョンは12.3.1
ブラウザはsafari chromeのどちらでも同じ現象が発生します。

PCのchrome、IE
アンドロイドのchromeでは発生していません。

HTML、CSS

<form id="messageform" action="" method="post" enctype="multipart/form-data"> 
<input type="file" id="upfile1" name="upfile1"><label for="upfile1" id="input-label1">ファイルを選択</label>
</form>

$(function(){
  $("#upfile1").on('change',function(){
	  
	  var file = $(this).prop('files')[0];
	  
	  // filenameが画像の場合
	  if (file.type.match('image.*')) {
		  // 初期化
		  $('#filegazouid1').remove();
		  // HTMLを挿入
		  $('#input-label1').after('<span id="filegazouid1" class="filegazou"></span>');
		  // 画像表示
		  var reader1 = new FileReader();
		  reader1.onload = function() {
			  var img_src = $('<img class="gazousize">').attr('src', reader1.result);
			  $('#filegazouid1').html(img_src);
		  }
		  
	  // filenameが画像でない場合 
	  }else{
		  //サムネイルを消す
		  $('#filegazouid1').remove();		  
	  }
		  reader1.readAsDataURL(file);
	  
   });
 });