HTML5 File Api（1）学习记录

最新推荐文章于 2024-08-09 21:30:00 发布

自由之翼Online

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量1k

点赞数

分类专栏： JavaScript html5 文章标签： javascript html5

本文链接：https://blog.csdn.net/awpzxtty/article/details/22494945

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

1.FileList-----文件列表

<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">

在浏览器控制台中输入以下命令可以得到FileList对象:

document.forms

[

<formname="upload">…</form>

]

document.forms['upload']

<formname="upload">…</form>

document.forms['upload']['fileselect']

<inputtype="file"name="fileselect"multiple>

document.forms['upload']['fileselect'].files

2.把选择的文件显示在页面上:

<!DOCTYPE html>
<html lang="zh-hans">
    <head>
	    <meta charset="utf-8">
		<link href="css/bootstrap.min.css" rel="stylesheet">
	    <script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
	    <title>HTML File Api Demo02</title>
	</head>
	<body>
	     <header id="header">
		    <div class="container">
			   <h1>文件列表</h1>
			   <h5>File list</h5>
			</div>
		 </header>
		 <div class="container">
		    <div class="row">
			   <ul class="list-group clearfix"></ul>
			   <form name="upload">
                      <input type="file" name="fileselect" multiple>
			   </form>
               <script>
                   (function(){
				       var listGroup = document.querySelector(".list-group"),
					   fileSelect = document.forms['upload']['fileselect'];
                       fileSelect.addEventListener('change',displayFileInfo,false);
					   function displayFileInfo(event){
					     var allFile = event.target.files;
						 for(var i=0;i<allFile.length;i++){
						       var li = document.createElement("li");
							   li.classList.add('list-group-item');
							   var node_content = document.createTextNode(
							      allFile[i].name+" "+
                                  allFile[i].type+" "+
								  Math.round(allFile[i].size/1024/1024*100)/100+" "+"MB"+" "+
								  allFile[i].lastModifiedDate.toLocaleDateString()
							   );
							   li.appendChild(node_content);
							   listGroup.appendChild(li); 
						 }
					   }
				   })()
			   </script>
			</div>
		 </div>
	</body>
</html>

3.拖放选择文件:

除了使用input选择框选择文件，Html5的File Api还允许我们使用拖拽的方式来选择文件。

<!DOCTYPE html>
<html lang="zh-hans">
    <head>
	    <meta charset="utf-8">
		<link href="css/bootstrap.min.css" rel="stylesheet">
	    <script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
	    <title>HTML File Api Demo02</title>
	</head>
	<body>
	     <header id="header">
		    <div class="container">
			   <h1>文件列表</h1>
			   <h5>File list</h5>
			</div>
		 </header>
		 <div class="container">
		    <div class="row">
			   <ul class="list-group clearfix"></ul>
			   <form name="upload">
			          <a href="#" id="selectbtn" class="btn btn-primary">选择文件</a>
					  <span class="badge pull-right"></span>
                      <input type="file" name="fileselect" multiple style="display:none;">
			   </form>
               <script>
                   (function(){
				       var listGroup = document.querySelector(".list-group"),
					   fileSelect = document.forms['upload']['fileselect'],
					   selectbtn = document.getElementById("selectbtn");
					   selectbtn.addEventListener('click',function(event){
					       fileSelect.click();
						   event.preventDefault();
					   },false);
                       fileSelect.addEventListener('change',displayFileInfo,false);
					   function displayFileInfo(event){
						 listGroup.innerHTML='';
						 event.stopPropagation();
						 event.preventDefault();
					     var allFile = event.target.files||event.dataTransfer.files;
						 document.querySelector('.badge').innerHTML=allFile.length;
						 for(var i=0;i<allFile.length;i++){
						       var li = document.createElement("li");
							   li.classList.add('list-group-item');
							   var node_content = document.createTextNode(
							      allFile[i].name+" "+
                                  allFile[i].type+" "+
								  Math.round(allFile[i].size/1024/1024*100)/100+" "+"MB"+" "+
								  allFile[i].lastModifiedDate.toLocaleDateString()
							   );
							   li.appendChild(node_content);
							   listGroup.appendChild(li); 
						 }
					   }
                       //拖放区域的提示文字
					   listGroup.innerHTML = '<p class="hint">请将要上传的文件拖放到这里</p>';
					   //监听drop和dragover事件
                       listGroup.addEventListener("drop",displayFileInfo,false);
					   listGroup.addEventListener("dragover",onDragOver,false);
					   function onDragOver(event){
					       event.stopPropagation();
						   event.preventDefault();
					   }
				   })()
			   </script>
			</div>
		 </div>
	</body>
</html>