在Web應用中,良好的使用者體驗是設計師們一直的追求,拖拽體驗就是其中之一。在HTML5之前,已經可以使用事件mousedown、mousemove和mouseup巧妙地實作了頁面内的拖放操作,但是拖放的操作範圍還隻是局限在浏覽器内部。HTML5提供的拖放API,不但能直接實作拖放操作,而且拖放的範圍已經超出浏覽器的邊界;HTML5提供的檔案API,支援拖拽多個檔案并上傳。
允許元素是否可以拖放很簡單。PS:雖然很誘人,但是浏覽器的支援問題依然很頭疼
<!-- 定義元素是否允許使用者拖放 -->
<div draggable="true">這是一個可拖動的div</div>
一個執行個體來實作拖放元素的内容
draggable.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>元素拖放</title>
<style type="text/css">
div{
border: 1px solid black;
width: 200px;
}
#dropTarget{
height: 200px;
width: 400px;
}
</style>
<script type="text/javascript">
function DragStart(){
var source=document.getElementById("dragSource");//拖放源元素
source.addEventListener('dragstart',function(e){
e.dataTransfer.setData('text/plain',e.target.innerHTML);//向dataTransfer對象中追加資料
e.dataTransfer.effectAllowed="copy";
});
}
function Drop(){
var target=document.getElementById("dropTarget");//拖放目标元素
target.addEventListener('drop',function(e){
var data=e.dataTransfer.getData('text/plain');//取得dataTransfer對象中的資料
this.innerHTML+=data;
e.dataTransfer.dropEffect="copy";
},false);
}
window.addEventListener('load',DragStart,false);
window.addEventListener('load',Drop,false);
</script>
</head>
<body>
<!-- 定義元素是否允許使用者拖放 -->
<div draggable="true">這是一個可拖動的div</div>
<!-- 拖放元素中的内容 源元素dragSource-->
<div id="dragSource" draggable="true">
拖這裡<img alt="" src="3.jpg" height="100" width="100">拖這裡
</div>
<!-- 目标元素dropTarget -->
<div id="dropTarget"></div>
</body>
</html>
檔案
實作了多檔案上傳
multipleFile.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>多檔案上傳</title>
</head>
<script type="text/javascript">
function ShowFiles(){
var fileList=document.getElementById("files").files;//擷取fileList對象
var msg=document.getElementById("msg");
var file;
for(var i=0;i<fileList.length;i++){
file=fileList[i]; //擷取單個File對象
msg.innerHTML+=file.name+", 位元組長度 :"+file.size+", 檔案類型 :"+file.type+";<br/>";
}
}
</script>
<body>
<input type="file" id="files" multiple="multiple" /><!-- 可選擇多個檔案 -->
<input type="button" value="顯示檔案" οnclick="ShowFiles()" />
<p id="msg"></p>
</body>
</html>
FileReader接口方法執行個體
fileReaderDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
if (typeof FileReader == "undefined") {
alert("浏覽器未實作FileReader 接口");
} else {
var reader = new FileReader();//聲明接口對象
}
function ReadAs(action) {
var blob = document.getElementById("files").files[0];
if (blob) {
switch (action.toLowerCase()) {
case "arraybuffer":
reader.readAsArrayBuffer(blob);//将檔案讀取為數組緩存區
break;
case "binarystring":
reader.readAsBinaryString(blob);//将檔案讀取為二進制字元串
break;
case "text":
reader.readAsText(blob);//将檔案讀取為文本
break;
case "dataurl":
reader.readAsDataURL(blob);//将檔案讀取為DataURL資料
break;
}
reader.onload = function(e) {//接口的事件:onload:成功完成資料讀取時觸發的事件,還有onloadend 資料讀取完成時觸發,無論成功失敗等等
//通路FileReader的接口屬性result,把讀取到記憶體中的内容擷取出來
var result = this.result;
if (/image\/\w+/.test(blob.type)
&& action.toLowerCase() == "dataurl") //如果是圖像檔案,且讀取為DataURL資料,那麼就顯示圖檔
document.getElementById("result").innerHTML = "<img src='"+result+"' />";
else
document.getElementById("result").innerHTML = result;
}
}
}
</script>
</head>
<body>
<input type="file" id="files" multiple="multiple" accept="image/*">
<br />
<input type="button" value="讀取為數組緩存區" οnclick="ReadAs('ArrayBuffer')">
<br />
<input type="button" value="讀取為二進制" οnclick="ReadAs('BinaryString')">
<br />
<input type="button" value="讀取為文本" οnclick="ReadAs('Text')">
<br />
<input type="button" value="讀取為圖像" οnclick="ReadAs('DataURL')">
<br />
<p id="result"></p>
</body>
</html>
接口的事件執行個體
fileReaderEvent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
if (typeof FileReader == "undefined") {
alert("浏覽器未實作FileReader 接口");
} else {
var reader = new FileReader();//聲明接口對象
}
function FileReaderEvent() {
var blob = document.getElementById("files").files[0];
var message=document.getElementById("message");
//添加loadstart事件
reader.οnlοadstart=function(){
message.innerHTML+= "Event:loadstart;<br/>";
}
//添加progress事件
reader.οnprοgress=function(){
message.innerHTML+= "Event:progress;<br/>";
}
//添加load事件
reader.onload = function(e) {
message.innerHTML+= "Event:load;<br/>";
}
//添加abort事件
reader.onabort = function(e) {
message.innerHTML+= "Event:abort;<br/>";
}
//添加error事件
reader.onerror = function(e) {
message.innerHTML+= "Event:error;<br/>";
}
//添加loadend事件
reader.onloadend = function(e) {
message.innerHTML+= "Event:loadend;<br/>";
}
reader.readAsDataURL(blob);//讀取檔案至記憶體
}
</script>
</head>
<body>
<input type="file" id="files" multiple="multiple" accept="image/*">
<br />
<input type="button" value="讀取檔案" οnclick="FileReaderEvent()">
<br />
<p id="message"></p>
</body>
</html>
執行個體:把圖檔拖入浏覽器
dropImg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>把圖檔拖入浏覽器</title>
<style type="text/css">
#dropTarget{
border:1px solid gray;
width:600px;
height:500px;
}
#dropTarget img{
width:200px;
height:160px;
}
</style>
<script type="text/javascript">
if (typeof FileReader == "undefined") {
alert("浏覽器未實作FileReader 接口");
} else {
var reader = new FileReader();//聲明接口對象
}
</script>
<script type="text/javascript">
var target;//定義目标元素的變量
//drop事件處理函數
function dropHandle(e){
var fileList=e.dataTransfer.files;//擷取拖拽檔案
var fileType;
//便利拖拽的檔案
for(var i=0;i<fileList.length;i++){
fileType=fileList[i].type;
if(fileType.indexOf("image")==-1){
alert("請拖拽圖檔");
return;
}
loadImg(fileList[i]);//加載單個檔案
}
}
function loadImg(file){
//添加load事件處理
reader.οnlοad=function(e){
var oImg=document.createElement("img");
oImg.src=this.result;//擷取讀取的檔案資料
target.appendChild(oImg);
}
//讀取檔案
reader.readAsDataURL(file);
}
window.οnlοad=function(){
//擷取目标元素
target=document.getElementById("dropTarget");
//給目标元素添加dragover事件處理
target.addEventListener("dragover",function(e){
e.preventDefault();
},false);
//給目标元素添加drop事件處理,處理函數為dropHandle()
target.addEventListener("drop",dropHandle,false);
}
</script>
</head>
<body>
<div>把圖檔拖放到下面的方框中</div>
<div id="dropTarget"></div>
</body>
</html>