06.HTML5拖放
2018-01-19 本文已影响0人
Ching_Lee
1.HTML5拖放
- 拖动开始：ondragstart事件规定了被拖动的数据（被拖动的元素触发该事件）
开始后需要设置拖动数据：setData() - 拖动完成：ondragover事件。（要拖入的区域触发该事件）
- 放置被拖动内容：ondrop事件 （要拖入的区域触发该事件）
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//允许放置，默认浏览器不允许放置，在ondragover事件触发后调用
function allowDrop(ev)
{
ev.preventDefault();
}
//获得拖动的元素，ondragstart事件触发后调用
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
//拖动完成后放下元素时调用，ondrop事件触发调用
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
2.HTML5文件上传
2.1FileReader接口的方法
FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
FileReader接口的方法：
- readAsBinaryString(file) : 将文件读取为二进制编码
- readAsText(file,[encoding]) : 将文件读取为文本
- readAsDataURL(file) : 将文件读取为DataURL
- abort(none) : 中断读取操作.
2.2 FileReader接口事件
FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
- onabort : 中断,
- onerror : 出错,
- onloadstart : 开始,
- onprogress : 正在读取,
- onload : 读取成功,
- onloadend : 读取完成，无论成功失败(无论成功失败)。
<script type="text/javascript">
2 var result=document.getElementById("result");
3 var file=document.getElementById("file");
4
5 //判断浏览器是否支持FileReader接口
6 if(typeof FileReader == 'undefined'){
7 result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
8 //使选择控件不可操作
9 file.setAttribute("disabled","disabled");
10 }
11
12 function readAsDataURL(){
13 //检验是否为图像文件
14 var file = document.getElementById("file").files[0];
15 if(!/image\/\w+/.test(file.type)){
16 alert("看清楚，这个需要图片！");
17 return false;
18 }
19 var reader = new FileReader();
20 //将文件以Data URL形式读入页面
21 reader.readAsDataURL(file);
22 reader.onload=function(e){
23 var result=document.getElementById("result");
24 //显示文件
25 result.innerHTML='<img src="' + e.target.result +'" alt="" />';
26 }
27 }
28
29 function readAsBinaryString(){
30 var file = document.getElementById("file").files[0];
31 var reader = new FileReader();
32 //将文件以二进制形式读入页面
33 reader.readAsBinaryString(file);
34 reader.onload=function(f){
35 var result=document.getElementById("result");
36 //显示文件
37 result.innerHTML=this.result;
38 }
39 }
40
41 function readAsText(){
42 var file = document.getElementById("file").files[0];
43 var reader = new FileReader();
44 //将文件以文本形式读入页面
45 reader.readAsText(file);
46 reader.onload=function(f){
47 var result=document.getElementById("result");
48 //显示文件
49 result.innerHTML=this.result;
50 }
51 }
52 </script>
53 <p>
54 <label>请选择一个文件：</label>
55 <input type="file" id="file" />
56 <input type="button" value="读取图像" onclick="readAsDataURL()" />
57 <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
58 <input type="button" value="读取文本文件" onclick="readAsText()" />
59 </p>
60 <div id="result" name="result"></div>
3.拖放本地资源
