h5学习笔记：FormData 练习

时间 2020-06-12 标签 h5 学习笔记 formdata 练习

这几天看了一些h5的相关的资料。趁着今晚有点时间作一些小练习。前端里面有关FormData 接口和用法能够在这里进行获取。
https://developer.mozilla.org/zh-CN/docs/Web/API/FormDatajavascript

FormData 能够配合作图片的上传，结合ajax进行传输。在这里一个程序，会涉及到canvas的绘图和压缩，FileReader 读取图片的预览图片，还有Blob 的相关的配合。能够看到，单纯一个上传就能够集合了h5几个相关的搭配，写起来挺复杂的。php

预览图片css

<div>
		<input id="file" type="file"/>
	</div>	  
	<img id="preImg" />
	  
	  <script type="text/javascript">	  	 
	  	 var file = document.querySelector('#file');
	  	 file.addEventListener('change',onchange);
	  	 function onchange(e){
	  	    console.log(e);
	  	 	var file = e.currentTarget.files[0];
	  	 	var reader = new FileReader();
	  	 	reader.onload = function(evt) {
			    console.log(evt.target.result);
			    var preImg = document.querySelector('#preImg');
			    preImg.src = evt.target.result;
			};
			reader.readAsDataURL(file);
	  	 }
</script>

今晚作的一个小练习仅仅配合php一段小代码进行试验一下。首先先编写一段php代码。html

<?php
   header('Access-Control-Allow-Origin:*');
   $name = $_POST['name'];
   echo "Hello ".$name;
?>

这里php代码仅仅接收一个变量值，测试过程会产生跨域咱们设置一下接收任何来源的数据访问。让这个程序可以运做起来。前端

接下来，编写一个简单前端，界面仅仅只有一个按钮。html5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>FormData测试</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
		<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	</head>
	<body>
		<button id="sendBtn">发送数据</button>		
		<script type="text/javascript"> //发送数据 $(function(){ $('#sendBtn').click(function(){ sendData(); }) function sendData(){ var formData = new FormData(); formData.append('name','owen'); $.ajax({ url:'http://127.0.0.1/vivo/index.php', type:'POST', cache: false, processData: false, contentType: false, data:formData, success:function(res){ console.log(res); alert(res); } }); } }) </script>
		
	</body>
</html>

当2个代码准备就绪就能够开测。测试后，里面有一组比较有趣的数据。
contentType: false 则会根据实际状况请求返回。java

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 139
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySXaUO8txV8A0zIo1
Host: 127.0.0.1
Origin: http://127.0.0.1:9000
Referer: http://127.0.0.1:9000/phptool/example/fromdata%E6%B5%8B%E8%AF%95.html?__hbt=1585927430131
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

传输过程当中Content-Type已经变成了multipart/form-data的表单方式。jquery

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySXaUO8txV8A0zIo1

Referer 是来自不一样的跨域端口，这个能够看到它的来源web

http://127.0.0.1:9000

运行结构后，咱们能够返回一段 Hello owen的响应数据。
ajax

这段html5和php很是简单，要写好其实不容易。只能分解其中过程去各个点学习。