jquery - Cancelling the File input dialog, flushes the earlier selected file in Jasny Bootstrap file input -
<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>i'm using jasny bootstrap file input image upload widget. here's link jasny bootstrap file input & jsfiddle image upload widget
steps:
- select file
- click on 'change'
- in dialog box, click 'cancel'
description:
suppose selecting file1 input, want change it, click on change button. dialog box appear, change mind , want stick file1, click cancel. if see file1 deselected.
expected result:
even after cancelling process, should able see file1 selected in file input.
i know default behaviour of google chrome file input if see single image upload on angular html5 file upload - single image upload
you'll find preserving file1 selected.
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>
Comments
Post a Comment