jQuery アップロード済みファイルの入れ替え

Question

お世話になっております。

jQueryでアップロード済みの2つの<input type="file">の中身と、
アップロード済み画像をプレビューしているimgの中身も入れかえるコードを書いていたのですが
イベント１回目はうまく動作するのですが２回目以降が入れ替える事ができません。

お気づきの点があれば教えていただきたいです。
よろしくお願いいたします。

<img id="image1">
<input type="file" id="file1">
<img id="image2">
<input type="file" id="file2">
<input type="checkbox" id="changeFiles">
<label for="changeFiles">1枚目と2枚目を入れ替える</label>

$(".changeFiles").on("change", function () {
  const file1 = $("#file1");
  const file2 = $("#file2");

  if (file1 && file2){
    file1.files = file2.prop('files');
    file2.files = file1.prop('files');
    onImage(1, file2.prop('files')[0]);
    onImage(2, file1.prop('files')[0]);
  }
});
function onImage(case, file){
  var reader = new FileReader();
  reader.onload = function() {
    if(case == 1){
      $("#image1").attr('src', reader.result);
    }else{
      $("#image2").attr('src', reader.result);
    }
  }
  reader.readAsDataURL(file);
};

Answer 1

file1.files = file2.prop('files');   // (★)
file2.files = file1.prop('files');   // (★)
onImage(1, file2.prop('files')[0]);
onImage(2, file1.prop('files')[0]);

これだと、入れ替わらないですね。
なぜなら、xxx.filesとxxx.prop('files')は別物だからです。jQueryオブジェクトのプロパティを変更したいなら、xxx.prop('hoge', yyy.prop('hoge'))みたいな書き方にしましょう。

ただ、個人的には、filesプロパティを変更するのは危険な気がします(勘です)。それより、onImage()の第1引数を使って、入れ替え制御するのをオススメします。

$("#changeFiles").on("change", function () {
  const checked = $(this).is(':checked');
  const file1 = $("#file1").prop('files');
  const file2 = $("#file2").prop('files');

  if (file1.length > 0 && file2.length > 0){
    onImage(checked?2:1, file1[0]);
    onImage(checked?1:2, file2[0]);
  }
});

ちなみに、onImage()の引数名のcaseで文法エラーになりませんか?
caseは予約語なので、別の名前に変えましょう。

あと、チェックボックスにchangeイベントハンドラを仕込むところのセレクタが間違ってませんか? $(".changeFiles")ではなく、$("#changeFiles")だと思います。