Question

您好我是Html和javascript的新手，想要了解如何在Html中实现列表容器，例如当用户使用浏览b按钮选择其中一个文件时，那些文件应该出现在List容器中。 Window Functions 如果列表容器中有文件，则也应该默认选择该文件，以便我可以提供查看或删除该文件的选项。请提供一些建议/最佳实践来实现这一点。

Answer 1

以下是使用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>

如何在html / Javascript中实现列表容器？

1 个答案: