Отмена диалога ввода файла, сбрасывает ранее выбранный файл в файл ввода 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 загрузчик виджета загрузки изображений. Вот ссылка на ввод файла начальной загрузки jasny, и это мой jsfiddle для виджета загрузки изображений

шаги:

1. Выберите любой файл
2. Нажмите "Изменить"
3. В диалоговом окне нажмите "Отмена"

Описание:

Предположим, я выбираю File1 в качестве входных данных, теперь я хочу изменить его, поэтому я нажимаю кнопку "Изменить". Появится диалоговое окно, теперь я передумал и хочу придерживаться File1, поэтому я нажимаю Отмена. Теперь, если вы увидите, что File1 не выбран.

Ожидаемый результат:

Даже после отмены процесса я смог увидеть Файл1 как выбранный в моем файле ввода.

---

Я знаю, что это стандартное поведение при вводе файла Google Chrome, но если вы видите "Загрузка одного изображения при угловой загрузке файла HTML5" - загрузка одного изображения

вы обнаружите, что он сохраняет 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>