Question

   
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script>

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="...">
  </div>
  <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
    <input type="file" name="...">
    </span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

我正在使用jasny bootstrap文件输入图片上传小部件。这是链接jasny bootstrap file input ＆安培;这是我的jsfiddle for image upload widget

步骤：

选择任何文件
点击“更改”
在对话框中，单击“取消”

说明

假设我选择File1作为输入，现在我想更改它，所以我点击更改按钮。将出现对话框，现在我改变主意并希望坚持使用File1，所以我单击取消。现在，如果您将看到File1被取消选择。

预期结果：

即使在取消进程后，我也应该可以在文件输入中看到File1为Selected。

我知道这是谷歌浏览器文件输入的默认行为，但如果您在Angular HTML5 file upload - single image upload上看到单张图片上传

你会发现它将File1保留为选中状态。

Answer 1

＆＃13;

var file1 = $('#file1').val()

$('#file-upload').on('change.bs.fileinput', function(e, file) {
  //console.log(e)
  $('#file1').val(file1)
});


$('#file-upload').on('clear.bs.fileinput', function(e, file) {
  //console.log(e)
  $('#file1').val(file1)
});

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script>
<div id="file-upload">
<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="...">
  </div>
  <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
    <input type="file" name="..." id="file1">
    </span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>
</div>

＆＃13;

取消文件输入对话框，刷新Jasny Bootstrap文件输入中的早期选定文件

1 个答案: