玩转HTML5应用实战:灵活拖拉文件
本人原创作品,原文发表在:
http://tech.it168.com/a2011/1207/1285/000001285230_all.shtml
转载请注明出处
在HTML5中,出现了众多的新的技术和特性,而本文将介绍的是目前HTML5标准中,对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解。在HTML5中的标准中,提到了希望能在新一代浏览器中,支持用户直接将客户端桌面的文件拖放到浏览器中,甚至鼓励做更多的工作(比如上传文件)。这篇文章将分如下几个方面进行初步的分析和探讨:
如何将文件拖放到web页面中
在Javascript中分析拖拽文件
在客户端装载和解析文件
使用 XMLHttpRequest2异步上传文件到服务端
上传时显示一个进度条
改进上传文件的表单,甚至支持IE 6,以让在各浏览器中可以兼容运行。
并介绍如何单单只用Javascript实现,不用任何框架。
目前浏览器对文件拖拉的支持
在我们开始讲解前,我们先要说明下,由于HTML5的标准最终版本还没完全发布,各浏览器也不是完全都对所有功能进行支持,所以本文的程序有可能在今后的各浏览器中不能完全运行成功,但至少在本文发表时,会对以下浏览器在如下各方面进行支持。
1) 目前程序能在所有的Firefox和Chrome的浏览器中很好的运行。
2) Opera浏览器能解通过Javascript去解析文件,但不支持文件的拖拉到浏览器中及使用XMLHttpRequest2去上传文件。
3) IE和Safari不支持任何本文提到的API和新特性。
4) Apple不允许在iOS系统中使用HTML表单上传文件。
下面,就让我们开始学习之旅吧。
HTML和CSS
我们先来看下上传文件的表单,代码如下:
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data"><fieldset><legend>HTML File Upload</legend><input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" /><div> <label for="fileselect">Files to upload:</label> <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> <div id="filedrag">or drop files here</div></div><div id="submitbutton"> <button type="submit">Upload Files</button></div></fieldset></form><div id="messages">Status Messages</div>
#filedrag { display: none; font-weight: bold; text-align: center; padding: 1em 0; margin: 1em 0; color: #555; border: 2px dashed #555; border-radius: 7px; cursor: default; } #filedrag.hover { color: #f00; border-color: #f00; border-style: solid; box-shadow: inset 0 3px 4px #888; }
// getElementById function $id(id) { return document.getElementById(id); } // // 输出信息 function Output(msg) { var m = $id("messages"); m.innerHTML = msg + m.innerHTML; }
// 判断当前浏览器中文件API是否可用 if (window.File && window.FileList && window.FileReader) { Init(); } // // 初始化程序 function Init() { var fileselect = $id("fileselect"), filedrag = $id("filedrag"), submitbutton = $id("submitbutton"); // 添加文件选择的事件监听 fileselect.addEventListener("change", FileSelectHandler, false); // 判断xmlhttprequest 2是否可用 var xhr = new XMLHttpRequest(); if (xhr.upload) { // file drop filedrag.addEventListener("dragover", FileDragHover, false); filedrag.addEventListener("dragleave", FileDragHover, false); filedrag.addEventListener("drop", FileSelectHandler, false); filedrag.style.display = "block"; // remove submit button submitbutton.style.display = "none"; } }
function FileDragHover(e) { e.stopPropagation(); e.preventDefault(); e.target.className = (e.type == "dragover" ? "hover" : ""); }
function FileSelectHandler(e) { FileDragHover(e); // 获得所有的文件列表 var files = e.target.files || e.dataTransfer.files; // 循环处理每个文件 for (var i = 0, f; f = files[i]; i++) { ParseFile(f); } }
function ParseFile(file) { Output( " File information: " + file.name + " type: " + file.type + " size: " + file.size + " bytes " ); }
function ParseFile(file) { Output( " File information: " + file.name + " type: " + file.type + " size: " + file.size + " bytes " ); }
if (file.type.indexOf("text") == 0) { var reader = new FileReader(); reader.onload = function(e) { Output( " " + file.name + ": " + e.target.result.replace(//g, ">") + " " ); } reader.readAsText(file); }
// display an image if (file.type.indexOf("image") == 0) { var reader = new FileReader(); reader.onload = function(e) { Output( "[b]" + file.name + ":[/b]" + '[img]' + e.target.result + '[/img]' ); } reader.readAsDataURL(file);