javascript - 如何在 html/Javascript 中实现列表容器?

标签 javascript html list file-upload

嗨,我是 Html 和 javascript 新手,想要一些有关如何在 Html 中实现列表容器的建议,例如当用户使用浏览 b 按钮选择其中一个文件时,这些文件应该出现在列表容器中。 enter image description here 如果列表容器中有一个文件,也应该默认选择它,以便我可以提供查看或删除该文件的选项。请提供一些建议/最佳实践来实现这一点。

最佳答案

这是一个使用 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>

关于javascript - 如何在 html/Javascript 中实现列表容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35471602/

相关文章:

r - 在 Markdown 中将列表对象转换为无序列表

python - 如何通过并行迭代两个列表来创建两个列表的元素对?

javascript - 在 Meteor 中登录并注册 Facebook 时出现问题

javascript - 为什么我不能使用点语法而不是关联数组来访问表单元素 id 属性

javascript - 停用 Bootstrap 事件标签单击

javascript - 无法获得与 Bootstrap 内联的推送菜单

javascript - 无法在页面上放置边框

python - 在与 Python 2.7 中的元组中的单词相匹配的列表中总结成员元素的值

javascript - 如何避免将 JavaScript ES6 模块导出添加到全局范围以用于普通脚本 block ?

javascript - 为什么函数不等待另一个函数