javascript - Blueimp fileupload opens file picker when whitespace is clicked. -
working on pre-existing project, found fileupload input triggers when whitespace after input element clicked, extending through several tags above it, , ending, in page, when gets pair of <li> contain form elements. (if there 1 or fewer of these list items, problem persists bottom of page.)
i have pair of jsfiddles minimal examples construct. i'm totally baffled what's going on here.
example 1 list item, behavior continues bottom of window: https://jsfiddle.net/e980gzry/
example 2 list items, behavior stops above first list item: https://jsfiddle.net/o76qd639/5/
has run situation before, , how go addressing it?
if don't mind using javascript trigger file browser, can using jquery:
$(function () { // whenever .fileinput-button clicked, trigger click on input element $(".fileinput-button").on('click', function (e) { $("#fileupload").click(); }); }); but if use directly need move input outside of .fileinput-button well:
<div class='box-content'> <span class='fileinput-button' style='color: #008fd2; border-bottom: 1px solid #e0e2e5'> <i class='fa fa-upload'> <span> <i class="fa fa-fa-upload"></i> add files... </span> </i> </span> <input id='fileupload' multiple='' name='files[]' type='file'> </div> and simplify css, removing .fileinput-button input definition:
.fileinput-button { display: block; cursor: pointer; } #fileupload { display: none; } see complete jsfiddle, tested in chrome , firefox.
by way, problem you're seeing browsers don't giving complete css control on input elements. workaround that.
Comments
Post a Comment