javascript - jQuery File Upload in Bootstrap Modal -

-

i having issues jquery file upload integration onto project. in previous post, javascript dropzone dynamic issue, couldn't find solution looking alternatives. want able use in bootstrap modal, couldn't working. if set outside of modal, working fine. simplify code, pretty copy , paste jquery file upload website: https://blueimp.github.io/jquery-file-upload/index.html. can find code below. setting code below inside modal, won't work. outside of modal, it'll work fine.

what tried setting z-index of table 9999, didn't good. table not showing thumbnail or anything. suggestions?

<div class="container">     <!-- file upload form used target file upload widget -->     <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="post" enctype="multipart/form-data">         <!-- redirect browsers javascript disabled origin page -->         <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jquery-file-upload/"></noscript>         <!-- fileupload-buttonbar contains buttons add/delete files , start/cancel upload -->         <div class="row fileupload-buttonbar">             <div class="col-lg-7">                 <!-- fileinput-button span used style file input field button -->                 <span class="btn btn-success fileinput-button">                     <i class="glyphicon glyphicon-plus"></i>                     <span>add files...</span>                     <input type="file" name="files[]" multiple>                 </span>                 <button type="submit" class="btn btn-primary start">                     <i class="glyphicon glyphicon-upload"></i>                     <span>start upload</span>                 </button>                 <button type="reset" class="btn btn-warning cancel">                     <i class="glyphicon glyphicon-ban-circle"></i>                     <span>cancel upload</span>                 </button>                 <button type="button" class="btn btn-danger delete">                     <i class="glyphicon glyphicon-trash"></i>                     <span>delete</span>                 </button>                 <input type="checkbox" class="toggle">                 <!-- global file processing state -->                 <span class="fileupload-process"></span>             </div>             <!-- global progress state -->             <div class="col-lg-5 fileupload-progress fade">                 <!-- global progress bar -->                 <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">                     <div class="progress-bar progress-bar-success" style="width:0%;"></div>                 </div>                 <!-- extended global progress state -->                 <div class="progress-extended">&nbsp;</div>             </div>         </div>         <!-- table listing files available upload/download -->         <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>     </form>     <br>     <div class="panel panel-default">         <div class="panel-heading">             <h3 class="panel-title">demo notes</h3>         </div>         <div class="panel-body">             <ul>                 <li>the maximum file size uploads in demo <strong>999 kb</strong> (default file size unlimited).</li>                 <li>only image files (<strong>jpg, gif, png</strong>) allowed in demo (by default there no file type restriction).</li>                 <li>uploaded files deleted automatically after <strong>5 minutes or less</strong> (demo files stored in memory).</li>                 <li>you can <strong>drag &amp; drop</strong> files desktop on webpage (see <a href="https://github.com/blueimp/jquery-file-upload/wiki/browser-support">browser support</a>).</li>                 <li>please refer <a href="https://github.com/blueimp/jquery-file-upload">project website</a> , <a href="https://github.com/blueimp/jquery-file-upload/wiki">documentation</a> more information.</li>                 <li>built <a href="http://getbootstrap.com/">bootstrap</a> css framework , icons <a href="http://glyphicons.com/">glyphicons</a>.</li>             </ul>         </div>     </div> </div> <!-- blueimp gallery widget --> <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">     <div class="slides"></div>     <h3 class="title"></h3>     <a class="prev">‹</a>     <a class="next">›</a>     <a class="close">×</a>     <a class="play-pause"></a>     <ol class="indicator"></ol> </div> <!-- template display files available upload --> <script id="template-upload" type="text/x-tmpl"> {% (var i=0, file; file=o.files[i]; i++) { %}     <tr class="template-upload fade">         <td>             <span class="preview"></span>         </td>         <td>             <p class="name">{%=file.name%}</p>             <strong class="error text-danger"></strong>         </td>         <td>             <p class="size">processing...</p>             <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>         </td>         <td>             {% if (!i && !o.options.autoupload) { %}                 <button class="btn btn-primary start" disabled>                     <i class="glyphicon glyphicon-upload"></i>                     <span>start</span>                 </button>             {% } %}             {% if (!i) { %}                 <button class="btn btn-warning cancel">                     <i class="glyphicon glyphicon-ban-circle"></i>                     <span>cancel</span>                 </button>             {% } %}         </td>     </tr> {% } %} </script> <!-- template display files available download --> <script id="template-download" type="text/x-tmpl"> {% (var i=0, file; file=o.files[i]; i++) { %}     <tr class="template-download fade">         <td>             <span class="preview">                 {% if (file.thumbnailurl) { %}                     <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailurl%}"></a>                 {% } %}             </span>         </td>         <td>             <p class="name">                 {% if (file.url) { %}                     <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailurl?'data-gallery':''%}>{%=file.name%}</a>                 {% } else { %}                     <span>{%=file.name%}</span>                 {% } %}             </p>             {% if (file.error) { %}                 <div><span class="label label-danger">error</span> {%=file.error%}</div>             {% } %}         </td>         <td>             <span class="size">{%=o.formatfilesize(file.size)%}</span>         </td>         <td>             {% if (file.deleteurl) { %}                 <button class="btn btn-danger delete" data-type="{%=file.deletetype%}" data-url="{%=file.deleteurl%}"{% if (file.deletewithcredentials) { %} data-xhr-fields='{"withcredentials":true}'{% } %}>                     <i class="glyphicon glyphicon-trash"></i>                     <span>delete</span>                 </button>                 <input type="checkbox" name="delete" value="1" class="toggle">             {% } else { %}                 <button class="btn btn-warning cancel">                     <i class="glyphicon glyphicon-ban-circle"></i>                     <span>cancel</span>                 </button>             {% } %}         </td>     </tr> {% } %} </script>


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea
Read more

c# - two queries in same method -

-
i trying execute 2 queries in same method gives me exception. can red of exception declaring new command there way use same command? string id="hi"; connection.open(); oledbcommand command1 = new oledbcommand(); command1.connection = connection; string query1 = "select * products category='" + combobox1.text + "' , subcategory = '" + combobox2.text + "' , sizes='" + combobox3.text + "'"; command1.commandtext = query1; oledbdatareader reader = command1.executereader(); while (reader.read()) { id = reader[0].tostring(); } textbox1.text = id; string query = "insert category_in (category_id,amount,amount_in) values ('"+ id+"' ,500,300)"; command1.commandtext = query; command1.executenonquery(); messagebox.show("saved"); connection.close();
Read more