取消文件输入对话框，刷新 Jasny Bootstrap 文件输入中先前选择的文件答案

【问题标题】：Cancelling the File input dialog, flushes the earlier selected file in Jasny Bootstrap file input取消文件输入对话框，刷新 Jasny Bootstrap 文件输入中先前选择的文件
【发布时间】：2016-02-06 07:35:08
【问题描述】：

   
<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 引导文件输入图像上传小部件。这是链接jasny bootstrap file input 这是我的jsfiddle for image upload widget

步骤：

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

说明：

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

预期结果：

即使在取消该过程之后，我也应该能够在我的文件输入中看到 File1 为 Selected。

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

您会发现它保留了选中的 File1。

【问题讨论】：

标签： jquery google-chrome file-upload jasny-bootstrap

【解决方案1】：

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)
});

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

【讨论】：