使用javascript选择后如何更改文件输入值？答案

【问题标题】：How to change the file input value after selected using javascript?使用javascript选择后如何更改文件输入值？
【发布时间】：2017-11-06 12:18:31
【问题描述】：

<div class="form-group">
<span class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
<input type='file'  class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

如何在使用javascript通过文件输入选择文件后将“从库中选择”的值更改为“选择的视频”

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/Events/change

标签： javascript html javascript-objects

【解决方案1】：

在change 事件中，检查this.files 是否大于0。

演示

document.querySelector( "[name='answer_video']" ).addEventListener( "change", function(){
    if ( this.files.length > 0 )
    {
       this.parentNode.querySelector(".videoLabel").innerHTML = "file selected";
    }
    else
    {
       this.parentNode.querySelector(".videoLabel").innerHTML = "Choose from Library";
    }
});

<div class="form-group">
<span class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i> <span class="videoLabel">Choose from Library</span>
<input type='file'  class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

【讨论】：

【解决方案2】：

你可以使用EventListenerDOMContentLoaded和onchange做一些事情参考here

document.addEventListener('DOMContentLoaded',function() {
document.querySelector('[type="file"]').onchange=changeEventHandler;
},false);

function changeEventHandler(event) {
    // You can use “this” to refer to the selected element.
     document.getElementById('video_option').innerHTML = 'video selected'; 
}

<div class="form-group">
<span  class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i><span id='video_option'> Choose from Library</span>
<input type='file'  class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

【讨论】：

【解决方案3】：

您可以在 jquery 方面寻求帮助，希望对您有所帮助。

$("input[type='file'][name='answer_video']").change(function(){
    var id = $(this).attr("id");
    var thisVal = document.getElementById(id).files[0].name;
    var nameBox = '<div class="fileContainer"><span class="docFileName">'+thisVal+'</span><span class="glyphicon glyphicon-remove" onclick=removeAttachment("'+id+'")>X</span></div>';
    $(this).before(nameBox).hide();
});

function removeAttachment(id){
    $("#"+id).val("").show();
    $(".fileContainer").remove();
}

【讨论】：

【解决方案4】：

您只需将onchange 函数与您的input 一起使用。

function changeName(){

document.getElementById("change").innerHTML = "changeName"

}

<div class="form-group">
<span id="change" class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
</span>
<input type='file'  class='form-control' name='answer_video' placeholder='Record' id='answer_video' onchange="changeName()">
</div>

【讨论】：