javascript - Display multiple progress bar with multiple file upload using jquery,html and css -
i use 1 browse button select multiple files upload 1 progress bar display uploaded files. please review following code:
<!doctype html> <html> <head> <title>proper title</title> <style> .a{ display:none; } </style> </head> <body> <form id="myform" method="post" enctype="multipart/form-data" "> files: <input type="file" id="files" name="files" multiple><br/> <div id="selectedfiles"></div> <progress class='a' max=100 value=10></progress> <input type="submit" > </form> <script> var seldiv = ""; document.addeventlistener("domcontentloaded", init, false); function init() { document.queryselector('#files').addeventlistener('change', handlefileselect, false); seldiv = document.queryselector("#selectedfiles"); } function handlefileselect(e) { if (!e.target.files) return; seldiv.innerhtml = ""; var files = e.target.files; var elements = document.getelementsbyclassname('a'); (var = 0; < files.length; i++) { var f = files[i]; var p = elements[0]; seldiv.innerhtml += f.name + "<br>"; p.style.display = 'block'; setinterval(function () { var = p.value; = + 10; //document.write(a); p.value = a; }, 1500); } } </script> </body> </html> i have display separate progress bar separate file upload.
try this:
<!doctype html> <html> <head> <title>proper title</title> <style> .a{ display:none; } </style> </head> <body> <form id="myform" method="post" enctype="multipart/form-data"> files: <input type="file" id="files" name="files" multiple><br/> <div id="progress-wpr"> <div class="filename"></div> <progress class='a' max=100 value=10></progress> </div> <input type="submit" > </form> <script> var seldiv = ""; document.addeventlistener("domcontentloaded", init, false); function init() { document.queryselector('#files').addeventlistener('change', handlefileselect, false); } function handlefileselect(e) { if(!e.target.files) return; var files = e.target.files; for(var i=1; i<files.length; i++) { var progress = document.createelement("progress"); progress.setattribute('class','a'); progress.setattribute('max','100'); progress.setattribute('value','100'); var filename = document.createelement("div"); filename.setattribute('class','filename'); document.getelementbyid('progress-wpr').appendchild(filename); document.getelementbyid('progress-wpr').appendchild(progress); } var elements = document.getelementsbyclassname('a'); var filename = document.getelementsbyclassname('filename'); for(var i=0; i<files.length; i++) { var f = files[i]; var p=elements[i]; filename[i].innerhtml = f.name; p.style.display='block'; setinterval(update_progress, 1500); } } function update_progress(){ var elements = document.getelementsbyclassname('a'); for(var i=0; i<elements.length; i++) { var p=elements[i]; var a=p.value; a=a+10; p.value=a; } } </script> </body> </html> updated
update_progress() function added
Comments
Post a Comment