我在页面中使用上传表单/组。这很好。但是,不可能为此添加复位/清除功能。我的控制权是:
<div id="uploadform" style="width:100%;" data-provides="fileupload">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text"><i class="fas fa-folder-plus"></i></label>
</div>
<div class="custom-file" >
<input type="file" name="sampleFile" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
<div class="input-group-append">
<button type="button" id="fileupload" class="btn btn-primary">Upload!</button>
</div>
</div>
</div>
我具有检测变更事件的功能
$('#inputGroupFile01').on('change',function(e){
console.log("onchange");
//get the file name
var fileName = e.target.files[0].name;
//replace the "Choose a file" label
$(this).next('.custom-file-label').html(fileName);
});
文件选择和标签都可以,但是无法重置输入文件。 更改事件永远不会触发。我将重置按钮移到了上传按钮上
$( '#fileupload' ).click(function() {
console.log("Upload");
$('#inputGroupFile01').val('');
return;
但是也没有效果。我还尝试在表单标签中使用所有内容并调用this.form.reset()。没有效果。亚姆真的很困惑。我认为更改事件永远不会触发,因为输入的typ =“ file”永远不会清除/重新发送?有想法吗?
其他信息:
如果我将文件添加到控件。更改事件被触发。在所有其他情况下,不会触发更改事件。不使用$('#inputGroupFile01').val('');
也不使用this.form.reset();
答案 0 :(得分:2)
此代码段将为您提供帮助
$("#clear").click(function() {
$("#inputGroupFile01").val('');
console.log("clear field", $("#inputGroupFile01").val())
})
$("#fileupload").click(function() {
console.log("current url is", $("#inputGroupFile01").val())
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="uploadform" style="width:100%;" data-provides="fileupload">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text"><i class="fas fa-folder-plus"></i></label>
</div>
<div class="custom-file" >
<input type="file" name="sampleFile" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
<div class="input-group-append">
<button type="button" id="fileupload" class="btn btn-primary">Upload!</button>
<button type="button" id="clear" class="btn btn-primary">Clear!</button>
</div>
</div>
</div>
答案 1 :(得分:0)
如果我向控件添加文件,则会触发Change事件。在所有其他情况下,更改事件均不会触发
和
无法重置输入文件。更改事件永远不会触发
这里的问题是,UI事件(单击,更改)仅由UI动作(用户单击或更改控件)触发。
诸如调用.val()
之类的代码动作不是UI动作,因此不会引发事件。
如果需要,可以通过代码引发/触发事件,例如
$("#id").val('').change()
在此特定情况下,OP .val('')
工作正常,但是它们将其隐藏在UX包装器后面,因此无法看到input type=file
进行更改,而是依靠change事件来更新包装器。由于更改事件并未从.val('')
触发,因此包装程序未更新,因此看起来没有更新。