異なるタイプの入力（ファイル、テキスト）を一緒に動作させる方法

Question

私は2種類の画像入力（ファイルとURLからの）を持つフォームを持っています。私は最後に変更された入力からのイメージを使用する必要があります。このために、入力フィールドの1つが変更されたときに画像のURL（またはファイルの場合はbase64文字列）で塗りつぶされる追加の不可視入力フィールド "imgTempURL"を作成しました。
たとえば、ファイルをファイル入力にアップロードすると、「imgTempURL」の値がbase64文字列に変更されます。 URLフィールドの値を入力すると、「imgTempURL」の値がURLフィールドの値に変わります。次に、ボタンを押して、「imgTempURL」の値をサーバーに送信します。それがどのように機能するか。
URL入力フィールドを入力した後にファイルをアップロードしようとすると、「imgTempURL」が新しいbase64文字列で埋められないという問題があります。同じ古いURLリンク値がそのまま残ります。

はここでHTMLの一部です：

<input type="text" id="imgTempUrl"/> <--made it visible to see its value--> 
<cfform id="form"> 
    Use file  
    <input type="file" id="imgUp" accept=".jpg"> 
    or URL 
    <input type="text" name="url" id="url" size="20" 
       onkeyup="document.getElementById('imgTempUrl').value=this.value;"> 
    <input type="Submit" class="" value="Generate" id="generate"> 
</cfform> 

私はこの機能にしてbase64文字列を取得します：

$(function(){ 
    $('#imgUp').change(function(){ 
     imgUp = document.getElementById('imgUp'); 
     if(imgUp.files && imgUp.files[0]){ 
      var reader = new FileReader(); 
      reader.onload = function(e){ 
      $('#imgTempUrl') 
       .attr('value', e.target.result); 
      }; 
      reader.readAsDataURL(imgUp.files[0]); 
     } 
    }); 
}); 

どのように私はこの問題を解決することができますか？ ファイルの入力とその動作に関する作業について知っておくべきことがありますか？

ありがとうございます！

Answer 1

$('#imgTempUrl').attr('value',e.target.result);これは、入力テキストの値を設定する方法ではありません。値を設定するには.val()メソッドを使用する必要があります。

$(function(){ 
 
    $('#imgUp').change(function(){ 
 
     imgUp = document.getElementById('imgUp'); 
 
     if(imgUp.files && imgUp.files[0]){ 
 
      var reader = new FileReader(); 
 
      reader.onload = function(e){ 
 
      $('#imgTempUrl').val(e.target.result); 
 
      }; 
 
      reader.readAsDataURL(imgUp.files[0]); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="imgTempUrl"/> <--made it visible to see its value--><br> 
 
<cfform id="form"> 
 
    Use file  
 
    <input type="file" id="imgUp" accept=".jpg"> <br> 
 
    or URL 
 
    <input type="text" name="url" id="url" size="20" 
 
       onkeyup="document.getElementById('imgTempUrl').value=this.value;"> 
 
    <input type="Submit" class="" value="Generate" id="generate"> 
 
</cfform>