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

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -