javascript - select the file to upload before sending with jquery -


i looking select files on interface before sent server....you can see screenshot

http://screencast.com/t/g2dixiysnkrm

my script :

            <!doctype html>             <html>             <head>             <meta charset="utf-8">             <!-- latest compiled , minified css -->             <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">             <!-- optional theme -->             <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">             <style >             .attachmentselect {                 display: block;                 font-family: courier;                 font-size: 11px;                 width: 650px;             }             ption:checked {                 background-color: -moz-html-cellhighlight !important;                 color: -moz-html-cellhighlighttext !important;             }             select > option {                 -moz-padding-end: 5px;                 -moz-padding-start: 3px;                 padding-bottom: 0;                 padding-top: 0;             }             option {                 -moz-user-select: none;                 display: block;                 float: none !important;                 line-height: normal !important;                 min-height: 1em;                 position: static !important;                 text-indent: 0;                 white-space: nowrap !important;                 word-wrap: normal !important;             }             ul,             li {                 margin: 0;                 padding: 0;             }             li {                 /*                     background: none repeat scroll 0 0 #f1f1f1;                 border-bottom: 1px solid #cccccc;                 cursor: pointer;                 margin-top: 1px;                 padding: 3px;*/                  background: none repeat scroll 0 0 #eeeeee;                 border: 1px solid #cccccc;                 color: #0088cc;                 display: block;                 margin: 5px;                 padding: 5px;                 cursor: move;             }             .fl { float: left; }             .fr { float: right; }             .remove {                 background: url("img/delete16x16.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);                 cursor: pointer;                 height: 16px;                 overflow: hidden;                 text-indent: -9999px;                 width: 16px;                 overflow:hidden;             }             .sortable-placeholder {                 background-color: #f3f3f3;                 border: 1px dashed #ccc;                 font-size: 45px;                 /*  height: 30px;*/                 padding-left: 10px;                 padding-right: 10px;                 text-align: center;             }             </style>             <script src="js/jquery.min.js"></script>             <!-- latest compiled , minified javascript -->             <script src="js/jquery-ui.min.js"></script>             <script src="http://markusslima.github.io/bootstrap-filestyle/js/bootstrap-filestyle.min.js"></script>             </head>             <body>               <br />               <br />               <!-- important:  form's enctype must "multipart/form-data" -->               <form method="post" action="uploadfileone.php" enctype="multipart/form-data">                 <br />                 <br />                 <div class="row">                   <div class="col-md-8">                      <!-- toupload[] -->                     <input  class="filestyle" value="" data-buttonname="btn-primary" id="upload" name="" type="file" value="" />                     <br />                     <br />                     <ul class="attachmentselect" >                     </ul>                     <!-- <input type="file" class="filestyle" data-buttonname="btn-primary"> -->                    </div>                   <div class=".col-md-4"> <a id="add" class="btn btn-default" href="#" >add</a></div>                 </div>                 <!--<input class="btn btn-default" type="submit" name="" /> -->                  <br />                 <br />                 <!--<div class="sortable-placeholder"></div>-->                 <button type="submit" class="btn btn-default">submit</button>                 <!--<input type="hidden" name="max_file_size" value="100000">-->                 <div id="list-input"></div>               </form>             <script type="text/javascript">             $(document).ready(function() {                  //----------------------                     var i=0;                 $('#add').click(function(){                      var path= $('input#upload').val();                     if(path !=""){                                 $('.attachmentselect').append('<li id="file'+i+'" data-path='+path+'>'+path+' <a class="fr remove" title="supprimer" href="javascript:void(0);">remove</a><input style="display:none;" name="file'+i+'" type="file" /></li>');                                 $('input#upload').val('')                                 i++                     }                 });                 //----------------------                $('.remove').on('click', function() {                      $(this).closest('li').remove();                 });                 //----------------------                 $(".attachmentselect").sortable({                     cursor : 'move',                     cursorat : { left : 0 },                     placeholder: "sortable-placeholder",                     forceplaceholdersize : true,                     droponempty : false,                     connectwith : 'ul'                 });                 //----------------------                   });              /**/             $('.attachmentselect').on('click', '.remove', function(){                   var currentfile = $(this).parent('li').attr('id');                     $(this).closest('li').remove();                     $('input[name='+currentfile+']').remove();             });             </script>             </body>             </html>

but problem ..i can not request files

firebug : http://screencast.com/t/oqkuen7sybir

check 

$('#i_submit').click( function() {     //check whether browser supports file api     if (window.file && window.filereader && window.filelist && window.blob)     {         //get file size , file type file input field         var fsize = $('#i_file')[0].files[0].size;          if(fsize>1048576) //do if file size more 1 mb (1048576)         {             alert(fsize +" bites\ntoo big!");         }else{             alert(fsize +" bites\nyou go!");         }     }else{         alert("please upgrade browser, because current browser lacks new features need!");     } });

take 9lessons


Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more