html5小测试

最新推荐文章于 2021-11-06 10:22:59 发布

乔木红

最新推荐文章于 2021-11-06 10:22:59 发布

阅读量654

点赞数

分类专栏： web前端文章标签： html5 function xmlhttprequest input microsoft

本文链接：https://blog.csdn.net/Qiaomuhong/article/details/7926663

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下面是我没事的时候做的html5最基础的小demo，感觉html5还是比较有意思的一个新技术，不过测试播放vedio失败了，后面要继续学习和应用。

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls">
<source src="106-你离过去越近，离未来就越远-雨阳.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;"></canvas>
<form id="testForm">
    E-mail: <input type="email" name="user_email" />
    Homepage: <input type="url" name="user_url" />
    Points: <input type="number" name="points" min="1" max="10" />
    <input type="range" name="points" min="1" max="10" />
    Date: <input type="date" name="user_date" />
    Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <input type="submit" value="提交">
</form>
<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>
<script type="text/javascript">
var c= document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//ctx.fillStyle = "blue";
//ctx.fillRect(0,0,75,50);

/*ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(10,50);
ctx.stroke();*/

/*ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(100,20,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();*/

var grd = ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"green");
ctx.fillStyle = grd;
ctx.fillRect(0,0,175,50);

/*var img=new Image()
img.src="12.png";
ctx.drawImage(img,0,0);*/
document.addEventListener("dragenter", function(e){
     dropbox.style.borderColor = 'gray';
}, false);
document.addEventListener("dragleave", function(e){
  dropbox.style.borderColor = 'silver';
}, false);
dropbox.addEventListener("dragenter", function(e){
  dropbox.style.borderColor = 'gray';
  dropbox.style.backgroundColor = 'white';
}, false);
dropbox.addEventListener("dragleave", function(e){
  dropbox.style.backgroundColor = 'transparent';
}, false);
dropbox.addEventListener("dragenter", function(e){
  e.stopPropagation();
  e.preventDefault();
}, false);
dropbox.addEventListener("dragover", function(e){
  e.stopPropagation();
  e.preventDefault();
}, false);
dropbox.addEventListener("drop", function(e){
  e.stopPropagation();
  e.preventDefault();

  handleFiles(e.dataTransfer.files);

  submit.disabled = false;
}, false);
handleFiles = function(files) {
  for (var i = 0; i < files.length; i++) {
   var file = files[i];

  }
}

if (!file.type.match(/image*/)) {
// continue;
}

var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);

var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);

var xhr = new XMLHttpRequest();
xhr.open('post', '/file/upload', true);

xhr.upload.addEventListener("progress", function(e) {
  if (e.lengthComputable) {
   var percentage = Math.round((e.loaded * 100) / e.total);
   img.style.opacity = 1-percentage/100.0;
  }
}, false);

xhr.upload.addEventListener("load", function(e){

}, false);

xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
xhr.setRequestHeader("Content-Length", fileSize);

var body = '';
body += "--" + boundary + "\r\n";
body += "Content-Disposition: form-data; name=\""+dropbox.getAttribute('name')+"\"; filename=\"" + fileName + "\"\r\n";
body += "Content-Type: "+fileType+"\r\n\r\n";
body += fileData + "\r\n";
body += "--" + boundary + "--\r\n";

xhr.sendAsBinary(body);
</script>
</body>
</html>