So machen Sie verschiedene Arten von Eingaben (Datei, Text) zusammenarbeiten

Question

Ich habe ein Formular mit 2 Arten von Bildeingabe (von Datei und von URL). Ich muss Bild von der letzten geänderten Eingabe verwenden. Dazu habe ich ein zusätzliches unsichtbares Eingabefeld "imgTempURL" erstellt, das sich mit der URL des Bildes füllt (oder Base64-String, wenn es sich um eine Datei handelt), wenn eines der Eingabefelder geändert wird.
Zum Beispiel, wenn ich eine Datei in die Datei-Eingabe hochladen, ändert sich "imgTempURL" Wert in Base64-String. Wenn ich den URL-Feldwert ausfülle, ändert sich der Wert "imgTempURL" in den URL-Feldwert. Dann drücke ich einen Knopf und der Wert "imgTempURL" wird an den Server gesendet. So funktioniert es.
Das Problem ist, dass "imgTempURL" nicht mit neuen Base64-Zeichenfolge gefüllt ist, wenn ich versuche, eine Datei hochladen, nachdem ich URL-Eingabefeld gefüllt - es bleibt mit dem gleichen alten URL-Link-Wert.

Hier ist der Teil von 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> 

ich base64 String in dieser Funktion erhalten:

$(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]); 
     } 
    }); 
}); 

Wie kann ich dieses Problem lösen? Gibt es etwas, das ich über das Arbeiten mit Dateieingaben und deren Verhalten wissen sollte?

Vielen Dank im Voraus!

Answer 1

$('#imgTempUrl').attr('value',e.target.result); Dies ist nicht die Art, den Wert eines Eingabetextes festzulegen. Sie sollten die Methode .val() verwenden, um den Wert festzulegen.

$(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>