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

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

步骤：

Select任意文件
点击'Change'
在对话框中，单击'Cancel'

描述：

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

预期结果：

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

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

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

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

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

Cancelling the File input dialog, flushes the earlier selected file in Jasny Bootstrap file input

jquery

google-chrome

file-upload

jasny-bootstrap