宁波网站制作的拖曳与FileAPI相结合

　　在将图像从桌面拖曳至此区域同时，被放置的图像可通过dataTransfer对象在回调函数drop()中访问：
　　vardrop=function(evt){
　　varfile=evt.dataTransferfiles[0]$
　　}；
　　现在我们涉及到了FileAPI:属性files代表了一个被称为FileList的对象，该对象为当前拖曳操作涉及到的所有文件对象形成的数组。尽管在PaulRouget的演示中多个文件可以同时加载，但在这里我们仅允许一次将一个文件放入放置区。因此此文件总是指向files[0]〇我们通过FileAPI创建的data:URI作为缩略图的sre属性。首先定义一个新的FileReader对象，并通过readAsDataURL()将图像异步载入内存中。在加载结束时，生成的data:URI将作为src属性被分配给图像。相关JavaScript代码相当简洁明了，如下所示：
　　vardataURLReader=newFileReader
　　dataURLReader.onloadend=functionQ{imgElem.src=dataURLReader,result;imglnfo.innerHTML=file.name+'('+_inKb(file.size)+')';dataURLReader.readAsDataURL(file);缩略图的宽度在CSS样式表中定义为width:px,高度则由浏览器自动调节。图像下面的文字信息来自FileAPI属性file.name及file.size。辅助函数_inKb()将file.size中的字节信息除以4,将文件大小转换成以千字节为单位，同时在计算好的值后面加上字符KB。
　　读取EXIF信息时，文件必须为二进制格式。我们使用和readAsDataURLO类似的readAsBinaryStringO并通过onload回调函数获取预期结果。鉴于EXIF数据隐藏在二进制代码中，需要先被提取才能够访问。在此我们要感谢JacobSeidelin在读取EXIF数据方面的JavaScript应用，它让我们的案例成为现实。
　　这里使用的exif.js版本并非JacobSeidelin的原始版本，而是PaulRouget的'M改进版。两者都有在线演示，链接如下：
　　http://www.nihilogic.dk/labs/exif
　　http://demos.hacks.mozilla.org/openweb/FileAPI通过函数fmdEXIFinJPEGO,我们仅用一行代码就可以找到key-value(键-值对)形式的EXIF信息。在for循环中，此列表由辅助函数_asRowo处理为表格行，并将结果输出至变量exiflnfo的表格中：
　　宁波网站制作认为varbinaryReader=newFileReaderQ;
　　binaryReader.onload=function(){
　　varexif=findEXIFinDPEG(binaryReader.result);for(varkeyinexif){exiflnfo.innerHTML+=_asRow(key>exif[key]);binaryReader.readAsBinaryString(file);如图1所示，案例仅列出了选定的EXIF信息。除了照相机类型、时间日期、照片形成时间、ISO速度(快门速度)、闪光灯使用情况、图像尺寸等信息外，甚至还包括了拍摄照片时由照相机纪录下来的GPS坐标。从坐标及图像名我们可以得到位置：StubaiAlps的Kalkk6gel附近的Senderstal山谷(奥地利TyrolInnsbruck西南方)。图像中央山峰被称为Schwarahom。
　　在测试图演示的程序时，若需要显示图像的所有EXIF信息，你只需要去掉extract_exif.js文件中//showTags=*'这行的注释。
　　尽管FireAPI规范相当简短，它仍提供了许多有趣的功能。除了已介绍过的以二进j制模式或是data:URI方法读取文件外，你还可以用readAsTextO读取文本文件。事件onprogress将在文件加载过程中生成一个作为用户反馈的进度显示，若加载时间过长，你还可以用abort()中止进程。另外，FileAPI还可以通过作用于表单。
　　和拖曳一样，在面对一些复杂应用程序时，你需要深人了解规范中的细节。
　　本文由乐华网络编辑，转载请注明出处
　　宁波网站制作www.leseo.net