"List Files to be uploaded."
Bootstrap 3.0.0 Snippet by VishwanathKD

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <body onload="myFunction()"> <input type="file" id="myFile" multiple size="50" onchange="myFunction()"> <p id="demo"></p> <div class="container-fluid"> <div style="min-height:60px;padding:12px 0"> <div id="contentWrapper"> <div class="row"> <div class="col-sm-7 col-xs-12"> <form role="form" id="fileForm" target="uploadFrame" method="post" enctype="multipart/form-data" action="loadImage.php?task=file" onsubmit="return ZM.loadImage(this)"> <div class="input-group input-group-sm"> <span class="input-group-btn"> <span class="btn btn-gray btn-file"> Browse… <input type="file" id="myFile" multiple size="50" onchange="myFunction()"> </span> </span> <input type="text" class="form-control" placeholder="Choose file" readonly> <span class="input-group-btn"> <button class="btn btn-gray" type="submit">Ok</button> </span> </div> <p id="demo"></p> <br /> <br /> </form> </div> </div> </div> </div> </div> <p><strong>Tip:</strong> Use the Control or the Shift key to select multiple files.</p> </body> </html>
.colorBox>div { width:30px; height:30px; background:url(/pics/color.png) } #contentWrapper{ background:#fff; padding:10px 10px 0; box-shadow:3px 2px 5px rgba(0,0,0,.3); margin:20px 0} .btn-gray{ background-color:#ccc; background-image:-moz-linear-gradient(#f4f4f4,#bcbcbc); background-image:-webkit-linear-gradient(#f4f4f4,#bcbcbc); background-image:-ms-linear-gradient(#f4f4f4,#bcbcbc); border-color:#aaa; color:#000} .btn-file{ position:relative } .btn-file input[type=file]{ position:absolute; top:0; right:0; min-width:100%; min-height:100%; font-size:999px; text-align:right; filter:alpha(opacity=0); opacity:0; cursor:inherit; display:block}input[readonly]{background-color:#fff!important;cursor:text!important}
// List files to be uploaded. function myFunction(){ var x = document.getElementById("myFile"); var txt = ""; if ('files' in x) { if (x.files.length == 0) { txt = "Select one or more files."; } else { for (var i = 0; i < x.files.length; i++) { txt += "<br><strong>" + (i+1) + ". file</strong><br>"; var file = x.files[i]; if ('name' in file) { txt += "name: " + file.name + "<br>"; } if ('size' in file) { txt += "size: " + file.size + " bytes <br>"; } } } } else { if (x.value == "") { txt += "Select one or more files."; } else { txt += "The files property is not supported by your browser!"; txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. } } document.getElementById("demo").innerHTML = txt; } //Onsubmit function var fn = function(e) { if (!/zmore/.test(e.target.className)) { $('#dmore').hide(); } } document.addEventListener('click', fn); document.addEventListener('touchstart', fn);

Related: See More


Questions / Comments: