How to implement a list container in html / Javascript?

Question

Hi i am new to Html and javascript and want some suggestion on how to implement a list container in Html, like when the user selects one of the files using browse b button then those file should appear in the List container. If there is a file in the list container it should also be default selected so that i can give options to view or delete that file. Please give some suggestions/ best practices to implement this.

use javascript or maybe easier for you to use jquery to append to a list dynamically e.g $("#mylist").append("

score 1 · Accepted Answer · answered Feb 18 '16 at 04:23

Here is an sample example which uses JQuery

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>file demo</title>
  <style>
  table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
  }
  th, td {
   padding: 4px;
  }
 </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script type="text/javascript">
$(document).ready(function() {

$( "form" ).submit(function( event ) {
  event.preventDefault();
  //var filename = $('#upfile').val();
  //$('ipfile').html(filename);
  
   var file = $('#ipfile')[0].files[0].name;
   //$('input[type=file]')[0].files[0].name
   var ip = "";
 if(file){
   ip=console.log(file.name);
 }

  $('#myTable tbody').last().append('<tr><td>' + file + '</td></tr>');
});
});
</script>
</head>
<body>

<div></div>
<div id="left_div" style="width: 600px; height: 250px;float:left; border:1px black solid; ">
 <table id="myTable" >
 <thead><tr><th>Files List</th></tr></thead>
 <tbody>
 <tr></tr>
 </tbody>
 </table>
</div>
<div id="right_div" style="width: 350px; height: 250px; float:left; border:1px black solid;">
<form>
  <input id="ipfile" type="file">
  <input id="upfile" type="submit" value="Upload" >
</form></div>
</body>
</html>

Awesome !! Could you please also elaborate on how view file when clicked on it. — Anand Kadhi, Feb 18 '16 at 05:25
@Anandj.Kadhi, if you want to place the text content from the selected file, try `$("#id of the element").load("your file name"); ` — Raju, Feb 18 '16 at 05:34
This link might be helpful - http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div — Raju, Feb 18 '16 at 05:37

How to implement a list container in html / Javascript?

1 Answers1