引自：http://www.iteye.com/topic/1128173

正在做一个跨平台的应用，需要使用phonegap进行文件的一些基本操作。

需求如下：可以选择本地图片，或者从相机选择图片，并进行显示在本地，然后上传到服务器，以及可以从服务器下载图片显示出来，如果本地之前下过，从缓存中取之前的文件。

对于相机本地API的调用，可以通过phonegap提供的getPicture以及captureImage进行处理。这两个的区别，我个人理解，前者是可以从相机或者相册取出图片放在cache目录中，后者直接从相机生成图片到机器上。

然后对文件操作的时候，phonegap提供了太多的类，在java中操作很简单的file类，在这里实现很复杂，有很多很多的回调函数，并且少很多方便的函数，例如没有isExists类似的函数。

网络上传，下载也有对应的phonegap API---FileTransfer。

这里记录在实际使用中，遇到的对文件操作的部分，在一个img中显示一张本地图片，如果找不到本地图片，就从网络下载。

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="jquery/jquery.mobile-1.2.0.css" />

 <script src="jquery/jquery-1.7.1.min.js"></script>

 <script src="jquery/jquery.mobile-1.2.0.min.js"></script> 

 <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>

 <script type="text/javascript" charset="utf-8">

     document.addEventListener("deviceready", onDeviceReady, false);

     var pictureSource; //  getPicture:数据来源参数的一个常量

     var destinationType; // getPicture中：设置getPicture的结果类型

     function onDeviceReady() {

          pictureSource = navigator.camera.PictureSourceType;

         destinationType = navigator.camera.DestinationType;

     }

     var pickUrl;

     function fromCamera(source){

         navigator.camera.getPicture(function(imageURI){

                 var largeImage = document.getElementById('smallImage');

                 largeImage.style.display = 'block';

                 largeImage.src = imageURI;

                 pickUrl = imageURI;

             }, function(){

                 if(source==pictureSource.CAMERA)

                     console.log('加载照相机出错!');

                 else

                     console.log('加载相册出错!');

             }, {

                 quality : 50,

                 destinationType : destinationType.FILE_URI,

                 sourceType : source

         });

     }

    /*********上传图片***************/

     function uploadFile() {

         var imageURI = pickUrl;

         if(!imageURI)

             alert('请先选择本地图片');

         var options = new FileUploadOptions();

         options.fileKey = "file";

         options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);

         options.mimeType = "image/jpeg";

         var ft = new FileTransfer();

         ft.upload(

                         imageURI,

                         encodeURI('http://192.168.93.114:1988/shandongTree/upload.jsp'),

                         function(){ alert('上传成功!');},

                         function(){ alert('上传失败!');},

                         options);

     }

     /**********下载相片***********/

     function downloadPic(sourceUrl,targetUrl){

         var fileTransfer = new FileTransfer();

         var uri = encodeURI(sourceUrl);  

         fileTransfer.download(

         uri,targetUrl,function(entry){

             var smallImage = document.getElementById('smallImage');

             smallImage.style.display = 'block';

             smallImage.src = entry.fullPath;

         },function(error){

             console.log("下载网络图片出现错误");

         });

     }

     function localFile() {

         window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){

             //创建目录

              fileSystem.root.getDirectory("file_mobile/download", {create:true},

                 function(fileEntry){ },

                 function(){  console.log("创建目录失败");});

              var _localFile = "file_mobile/download/testtest4.jpg";

              var _url = "http://192.168.93.114:1988/shandongTree/download.jsp?pId=13";

              //查找文件

              fileSystem.root.getFile(_localFile, null, function(fileEntry){

                 //文件存在就直接显示

                 var smallImage = document.getElementById('smallImage');

                 smallImage.style.display = 'block';

                 smallImage.src = fileEntry.fullPath;

             }, function(){

                 //否则就到网络下载图片!

                 fileSystem.root.getFile(_localFile, {create:true}, function(fileEntry){

                     var targetURL = fileEntry.toURL();

                     downloadPic(_url,targetURL);

                  },function(){

                     alert('下载图片出错');

                  });

             });

         }, function(evt){

             console.log("加载文件系统出现错误");

         });

     }

 </script>

 </head>

 <body>

     <!-- pege 1 -->

          <a data-inline='true'

                 href="javascript:fromCamera(pictureSource.PHOTOLIBRARY)" data-role="button">来自相册</a>

             <a data-inline='true'

                 href="javascript:fromCamera(pictureSource.CAMERA)" data-role="button">来自相机</a>

             <a data-inline='true'

                 href="javascript:localFile()" data-role="button">显示缓存图片，没有则下载</a>

             <a data-inline='true'

                 href="javascript:uploadFile()" data-role="button">上传图片</a>

                 <div style='height:200px;width:200px;border:1px solid green;align:center;'>

             <img

                 style="width: 160px; height: 160px;" id="smallImage"

                 src="" />

                 </div>

 </body>

 </html>

phoneGap实现离线缓存的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  4. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  5. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  6. 使用html5的离线缓存技术

    突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...

  7. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

  8. HTML5 manifest离线缓存

    一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...

  9. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

随机推荐

  1. MII_GMII_RGMII_RMII_SMII_SSMII_TBI_RTBI比较

    MII_GMII_RGMII_RMII_SMII_SSMII_TBI_RTBI比较 https://wenku.baidu.com/view/2e136caa8bd63186bdebbc40.html

  2. Angularjs学习笔记6_table1

    <!DOCTYPE html><html lang="en" ng-app="plunker"><head>    < ...

  3. Spring/SpringMVC在启动完成后执行方法

    在某些情况下,有可能你会有这种需求:在Spring/SpringMVC项目中,当Spring/SpringMVC启动完成后,你需要执行一个方法来完成某些事件(比如创建网站地图,比如从订阅Redis服务 ...

  4. c++ header

    简言之:头文件只能包含interface(函数声明.宏定义.类定义(只包含数据成员定义和函数成员声明,不能包含函数成员定义!)),绝对不能包含一丁点的implementation(内部数据结构,实现类 ...

  5. 前端webview开发中遇到的一些问题及其解决方法

    最近做了一个webview中的兑换页面,本来以为很简单,想不到遇到了远远超出预期数量的BUG,记下来,以备后患. 1 inline-block元素折行 BUG描述:现在我有三个DIV,要在一列等宽排列 ...

  6. 第一百七十五节，jQuery，工具函数

    jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...

  7. 任何应用程序都可拥有 Web Service 组件。

    任何应用程序都可拥有 Web Service 组件. Web Service 的创建与编程语言的种类无关. 本章节我们将为大家介绍使用 PHP 的 SOAP 扩展来创建 Web Service. SO ...

  8. 【直播预告】7月18日3D游戏引擎免费公开课答疑，參与送C币！

    喜讯喜讯! 为了酬谢广大学员.CSDN学院特推出iOS和3D游戏引擎开发免费技术答疑公开课,让您度过一个充实的暑假~ 參与本次公开课,即有机会获得50C币! 答疑公开课时间:7月18日 晚7:30-9 ...

  9. Unity3d 重力感应

    Input.acceleration 加速度 最近一次测量的设备在三维空间中的线性加速度(只读); void Update () { v3=Input.acceleration; } void OnG ...

  10. iOS学习笔记（七）——UI基础UIButton

    前面写了UIWindow.UIViewController,那些都是一些框架,框架需要填充上具体的view才能组成我们的应用,移动应用开发中UI占了很大一部分,最基础的UI实现是使用系统提供的各种控件 ...