这几天看了一些h5的相关的资料。趁着今晚有点时间做一些小练习。前端里面有关FormData 接口和用法可以在这里进行获取。
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
FormData 可以配合做图片的上传,结合ajax进行传输。在这里一个程序,会涉及到canvas的绘图和压缩,FileReader 读取图片的预览图片,还有Blob 的相关的配合。可以看到,单纯一个上传就可以集合了h5几个相关的搭配,写起来挺复杂的。
预览图片
<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代码。
<?php
header('Access-Control-Allow-Origin:*');
$name = $_POST['name'];
echo "Hello ".$name;
?>
这里php代码仅仅接收一个变量值,测试过程会产生跨域我们设置一下接收任何来源的数据访问。让这个程序能够运作起来。
接下来,编写一个简单前端,界面仅仅只有一个按钮。
<!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 则会根据实际情况请求返回。
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的表单方式。
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySXaUO8txV8A0zIo1
Referer 是来自不同的跨域端口,这个可以看到它的来源
http://127.0.0.1:9000
运行结构后,我们可以返回一段 Hello owen的响应数据。
这段html5和php非常简单,要写好其实不容易。只能分解其中过程去各个点学习。