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

Question

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

How to change the value "Choose from Library" to "video selected" after choosing file through file input using javascript

Answer 1

you may take help with jquery, hope it will help you.

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

Answer 2

On change event, check if the this.files are more than 0 .

Demo

 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> 

Answer 3

You can use EventListener DOMContentLoaded and onchange do something reference 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> 

Answer 4

You only need to use the onchange function with your 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>