Question

我有一个包含2种图像输入的表单（来自文件和URL）。我需要使用上次更改的输入中的图像。为此我创建了一个额外的隐形输入字段＆＃34; imgTempURL＆＃34; ，当其中一个输入字段发生变化时，它会填充图像的网址（或base64字符串，如果它是一个文件）。
例如，如果我将文件上传到文件输入，＆＃34; imgTempURL＆＃34;值更改为base64字符串。如果我填写URL字段值，＆＃34; imgTempURL＆＃34;值更改为URL字段值。然后我按一个按钮＆＃34; imgTempURL＆＃34;值被发送到服务器。它是如何工作的。
问题在于＆＃34; imgTempURL＆＃34;没有填充新的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()方法来设置值。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使不同类型的输入（文件，文本）协同工作

1 个答案: