如何使不同類型的輸入（文件，文本）一起工作

Question

我有一種形式與2種類型的圖像輸入（從文件和URL）。我需要使用上次更改的輸入中的圖像。爲此，我創建了另一個不可見的輸入字段「imgTempURL」，當輸入字段之一發生更改時，它會填充圖像的url（或base64字符串，如果它是文件）。
例如，如果我將文件上載到文件輸入，則「imgTempURL」值將更改爲base64字符串。如果我填寫URL字段值，則「imgTempURL」值將更改爲URL字段值。然後我按下按鈕並將「imgTempURL」值發送到服務器。這是如何工作的。
問題是，「imgTempURL」沒有填充新的base64字符串，如果我在填充URL輸入字段後嘗試上載文件 - 它仍然具有相同的舊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>