HTML5的API（二）

最新推荐文章于 2024-09-14 18:52:56 发布

cifu7520

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3502371/blog/1162819

版权

6.文件

文件上传：

多文件上传：设置input属性multiple
过滤上传文件类型：设置accept属性(accept="image/jpeg" | accept="image/*")

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
</head>
<body>
  <form action="#">
	<input type="file" name="pic" multiple accept="image/*">
  </form>
</body>
</html>

File对象：

       属性：
           file.name 文件名
           file.size 文件大小
           file.type 文件类型
           file.lastModified 最后修改时间(时间戳)
           file.lastModifiedDate 最后修改时间

FileList对象：

       File对象组成的数组
       类数组对象
       通过inputElement.files，获取到FileList对象

类数组对象的遍历：

          1.for循环
       2.[].forEach.call(ele,function(){})        call改变forEach中的this
       3.[].forEach.apply(ele,[function(){}])      apply改变forEach中的this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>File对象和FileList对象</title>
</head>
<body>
  <input type="file" onchange="getFile(this)" multiple>
  <br>
  <div id="box"></div>
  <script>
	function getFile(ele) {
	  var message = '';

	  //遍历FileList
	  [].forEach.call(ele.files,function(file) {
		message += 'name:' + file.name + '<br>';
		message += 'size:' + file.size + '<br>';
		message += 'type:' + file.type + '<br>';
		message += 'lastModified:' + file.lastModified + '<br>';
		message += 'lastModifiedDate:' + file.lastModifiedDate + '<br>';
		message += '<hr>';
	  })
	  document.getElementById('box').innerHTML = message;
	  }
  </script>
</body>
</html>

FileReader对象：异步(类似ajax)

       构造函数：
           var fr = new FileReader()
       属性：
           fr.result
       方法：
           fr.readAsText(file) 读取为文本
           fr.readAsDataURL(file) 读取为base64
           fr.abort() 中断

       事件：
           onload 读取成功后触发
           onloadstart 读取开始时触发
           onloadend 读取结束时触发(不论成功还是失败)
           onerror 读取错误时触发
           onabort 读取中断时触发
           onprogress 读取过程中触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FileReader读取文件</title>
</head>
<body>
	<input type="file" onchange="readFile(this)">
	<br>
	<div id="box"></div>
	<script>
		function readFile(ele) {
			//获取file对象
			var file = ele.files[0];
			if (file.type.match(/^image\/.+$/)) {
				readImage(file);
			}else if (file.type.match(/^text\/.+$/)) {
				readText(file);
			}else {
				console.log('该类型无法读取');
			}
		}

		//读取图片
		function readImage(file) {
			var fr = new FileReader();
			fr.onload = function() {
				var img = document.createElement('img');
				img.src = fr.result;
				img.width = 200;
				document.getElementById('box').appendChild(img);
			}
			fr.readAsDataURL(file);
		}

		//读取文本
		function readText(file) {
			var fr = new FileReader();
			fr.onload = function() {
				var pre = document.createElement('pre');
				pre.innerHTML = fr.result;
				document.getElementById('box').appendChild(pre);
			}
			fr.readAsDataURL(file);
		}
	</script>
</body>
</html>

FormData：

            ajax本身不能上传图片，可以配合FormData实现。
        使用方法：
            ajax中，把FormData作为send的参数；
            jquery中，需要设置processData:false,contentType:false。
        构造函数：
            var fd = new FormData([formElement]);
        方法：
            fd.append(key,value)
            fd.delete(key)
            fd.set(key,value)
            fd.get(key)
            fd.keys()
           ……

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FormData</title>
</head>
<body>
	<form action="" onsubmit="return submitData()" id="myform">
		<table>
			<tr>
				<td>姓名：</td>
				<td>
					<input type="text" name="age">
				</td>
			</tr>
			<tr>
				<td>头像：</td>
				<td>
					<input type="file" name="avatar">
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<button>提交</button>
				</td>
			</tr>
		</table>
	</form>
	<script>
		function submitData() {
			//使用FormData
			var fd = new FormData(document.getElementById('myform'));
			fd.append('grade','h5-13');

			//创建xhr对象
			var xhr = new XMLHttpRequest();

			//设置请求超时的事件
			xhr.timeout = 3000;

			//监听事件
			xhr.onreadystatechange = function() {
				console.log('readystate:' + xhr.readystate);
			}

			xhr.onerror = function() {
				console.log('error');
			}

			xhr.onabort = function() {
				console.log('abort');
			}

			xhr.ontimeout = function() {
				console.log('timeout');
			}

			xhr.onloadstart = function() {
				console.log('loadstart');
			}

			xhr.onloadend = function() {
				console.log('loadend');
			}

			xhr.onload = function() {
				console.log('load');
			}

			xhr.onprogress = function(en) {
				console.log('progress');
				console.log(en);
			}

			//初始化
			xhr.open('POST','http://localhost/server/post.php');

			//发送
			xhr.send(fd);

			return false;
		}
	</script>
</body>
</html>

XMLHttpRequest Level2
   属性：
       responseText
       responseXML
       readyState
       status HTTP状态
       timeout 超时时间

   方法：
       open()
       send()
       abort()

   事件：
       onreadstatechange
       onerror
       ontimeout
       onabort
       onload
       onloadstart
       onloadend
       onprogress

ProgressEvent 事件类型
total 下载总数
loaded 当前下载数

XMLHttpRequestUpload
   事件：
       onload
       onloadstart
       onloadend
       ontimeout
       onabort
       onerror
       onprogress

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>XMLHttpRequestUpload</title>
</head>
<body>
	<form action="" onsubmit="return submitData()" id="myform">
		<table>
			<tr>
				<td>头像</td>
				<td>
					<input type="file" name="avatar" multiple="">
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<button>提交</button>
				</td>
			</tr>
		</table>
	</form>
	<script>
		function submitData() {
			//使用FormData
			var fd = new FormData(document.getElementById('myform'));

			fd.append('grade','h5-13');

			//创建xhr对象
			var xhr = new XMLHttpRequest();

			//设置请求超时的事件(发送ajax要设置timeout)
			xhr.timeout = 3000;

			//监测文件上传过程
			xhr.upload.onprogress = function(en) {
				console.log('上传了' + en.loaded + '/' + en.total);
			}

			//初始化
			xhr.open('POST','http://localhost/server/upload.php');

			//发送
			xhr.send(fd);

			return false;
		}
	</script>
</body>
</html>

转载于:https://my.oschina.net/u/3502371/blog/1162819