·您当前的位置:主页 > 技术教程 > Html5技术 >

[php]HTML5文件API

时间:2014-09-22 11:13oseye.net
[php]Apache的配置httpd.conf,配置Apache,apache配置

FileList对象和File对象

在HTML5中对file控件添加了multiple属性,允许一次放置多个文件,使用FileList来表示文件列表对象,File对象表示每一个文件。File对象有name、lastModifiedDate、size和type属性。

另外,HTML5中对file控件还添加了accept属性,企图让file控件只能接受某种类型的文件,但目前浏览器只局限于文件选择框的操作。 

Blob对象

Blob表示二进制原始数据,据说它提供了一个slice方法,可以通过该方法访问到字节内部的原始数据块,但没见过如何用。事实上File对象也继承了Blob对象。Blob对象有两个属性:size和type,具体示例请参考上文。

FileReader接口

FileReader接口主要用来把文件读入内存,并且读取文件中的数据。FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取,这些都是异步的,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
  • readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
  • readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
  • readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

事件 描述
readAsBinaryString file
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
  1. <form action="" method="post" enctype="multipart/form-data">
  2. <input type="file" name="file" id="file">
  3. <input type="button" name="button" id="button" onClick="doit()" value="按钮">
  4. </form>
  5. <script type="text/javascript">
  6. function doit(){
  7. var file=document.getElementById("file");
  8. if(file.files.length!=0){
  9. var reader=new FileReader();
  10. reader.readAsText(file.files[0],"GB2312");
  11. reader.onload=function(f){
  12. alert(this.result);
  13. }
  14. }
  15. return false;
  16. }
  17. </script>

拖放API

HTML5中大大简化了拖放的操作,实现拖放只需要两步:

  1. 将想要拖放对象元素的属性draggable设置为true(img元素和指定了href的a元素默认允许拖放);
  2. 编写与拖放有段的事件代码;
  1. <p>请把图片或div拖放到矩形中:</p>
  2. <div ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid #ccc;width:500px;height:200px;"></div>
  3. <br />
  4. <img id="dragedimg" src="0.jpg" ondragstart="drag(event)" />
  5. <div id="drageddiv" draggable="true" ondragstart="drag(event)" style="border:1px solid #F00">被拖放的div</div>
  6. <script type="text/javascript">
  7. function allowDrop(ev){
  8. ev.preventDefault();
  9. }
  10.  
  11. function drag(ev){
  12. ev.dataTransfer.setData("Text",ev.target.id);
  13. }
  14.  
  15. function drop(ev){
  16. ev.preventDefault();
  17. var data=ev.dataTransfer.getData("Text");
  18. ev.target.appendChild(document.getElementById(data));
  19. }
  20. </script>

如上示例,实现拖放的步骤:

  1. 分别设置图片(dragedimg)和拖动div(drageddiv)的属性draggable为true;
  2. 设置被拖动元素的ondragstart事件,把相关数据存到dataTransfer对象;
  3. 关闭目的元素的默认事件preventDefault;
  4. 设置目的元素的drop事件(记得关闭默认事件,否则意想不到的效果),在drop事件中获取dataTransfer的相关数据并做相应处理;

拖放的相关事件

事件 产生事件的元素 描述
dragstart 被拖放的元素。 开始拖放操作。
drag 被拖放的元素。 拖放过程中。
dragenter 拖放过程中鼠标经过的元素。 被拖放的元素开始进入本元素的范围内。
dragover 拖放过程中鼠标经过的元素。 被拖放的元素正在本元素范围内移动。
dragleave 拖放过程中鼠标经过的元素。 被拖放的元素离开本元素的范围。
drop 拖放的目标元素。 有其他元素被拖放到了本元素中。
dragend 拖放的目标元素。 拖放操作结束。

DataTransfer对象的属性与方法

如果DataTransfer对象的属性和方法使用得好,可以实现定制拖放图标,让它只支持特定拖放(例如复制、移动等),甚至可以实现更复杂的拖放操作:

  • dropEffect属性:表示拖放操作的视觉效果,允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内,允许指定的值为none、copy、link、move。
  • effectAllowed属性:用来指定当元素被拖放时所允许的视觉效果,可以指定的值为:none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。
  • type属性:存入数据的种类,字符串的伪数组。
  • void clearData(DOMString format)方法:清除DataTransfer对象中存放的数据,如果省略参数,则清除全部数据。
  • void setData(DOMString format, DOMString data)方法:向DataTransfer对象内存入数据。
  • DOMString getData(DOMString format)方法:从DataTransfer对象中读数据。
  • void setDragImage(Element image, long x, long y)方法:用img元素来设置拖放图标(部分浏览器中可以用canvas等其他元素来设置)。

setData()方法在拖放开始时向dataTransfer对象中存入数据,它用type属性来指定数据MIME类型,而getData()方法在拖 动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除DataTransfer对象内的数据。

设定拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所 允许的视觉效果,一般在ondragstart事件中设定,允许设定的值为none、copy、copyLink、copyMove、link、 linkMove、move、all、unintialize。dropEffect属性表示实际拖放时的视觉效果,一般在ondragover事件中指 定,允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示 的允许的视觉效果范围内。规则如下所示:

  • 如果effectAllowed属性设定为none,则不允许拖放元素。
  • 如果不dropEffect属性设定为none,则不允许被拖放到目标元素中。
  • 如果effectAllowed属性设定为all或不设定,则dropEffect属性允许被设定为任何值,并且按指定的视觉效果进行显示。
  • 如果effectAllowed属性设定为具体效果(不为none、all),dropEffect属性也设定了具体视觉效果,则两个具体效果值必须完全相等,否则不允许将被拖放元素拖放到目标元素中。
自定义拖放图标
除了上面所说的使用effectAllowed属性与dropEffect属性外,HTML5中还允许自定义拖放图标——指的是在用鼠标拖动元素的过程中,位于鼠标指针下部的小图标。
DataTransfer对象有一个setDragImage()方法,该方法有三个参数,第一个参数image设定为拖放图标的图标元素,第二个参数为拖放图标离鼠标指针的x轴方向的位移量,第三个参数是拖放图标离鼠标指针的y轴方向的位移量。

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器