javascript - 如何使不同类型的输入(文件、文本)协同工作

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>