phoneGap实现离线缓存
引自：http://www.iteye.com/topic/1128173
正在做一个跨平台的应用，需要使用phonegap进行文件的一些基本操作。
需求如下：可以选择本地图片，或者从相机选择图片，并进行显示在本地，然后上传到服务器，以及可以从服务器下载图片显示出来，如果本地之前下过，从缓存中取之前的文件。
对于相机本地API的调用，可以通过phonegap提供的getPicture以及captureImage进行处理。这两个的区别，我个人理解，前者是可以从相机或者相册取出图片放在cache目录中，后者直接从相机生成图片到机器上。
然后对文件操作的时候，phonegap提供了太多的类，在java中操作很简单的file类，在这里实现很复杂，有很多很多的回调函数，并且少很多方便的函数，例如没有isExists类似的函数。
网络上传，下载也有对应的phonegap API---FileTransfer。
这里记录在实际使用中，遇到的对文件操作的部分，在一个img中显示一张本地图片，如果找不到本地图片，就从网络下载。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="jquery/jquery.mobile-1.2.0.css" /> 7 <script src="jquery/jquery-1.7.1.min.js"></script> 8 <script src="jquery/jquery.mobile-1.2.0.min.js"></script> 9 10 <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> 11 <script type="text/javascript" charset="utf-8"> 12 document.addEventListener("deviceready", onDeviceReady, false); 13 var pictureSource; // getPicture:数据来源参数的一个常量 14 var destinationType; // getPicture中：设置getPicture的结果类型 15 function onDeviceReady() { 16 pictureSource = navigator.camera.PictureSourceType; 17 destinationType = navigator.camera.DestinationType; 18 } 19 20 var pickUrl; 21 function fromCamera(source){ 22 navigator.camera.getPicture(function(imageURI){ 23 var largeImage = document.getElementById('smallImage'); 24 largeImage.style.display = 'block'; 25 largeImage.src = imageURI; 26 pickUrl = imageURI; 27 }, function(){ 28 if(source==pictureSource.CAMERA) 29 console.log('加载照相机出错!'); 30 else 31 console.log('加载相册出错!'); 32 }, { 33 quality : 50, 34 destinationType : destinationType.FILE_URI, 35 sourceType : source 36 }); 37 } 38 39 /*********上传图片***************/ 40 function uploadFile() { 41 var imageURI = pickUrl; 42 if(!imageURI) 43 alert('请先选择本地图片'); 44 var options = new FileUploadOptions(); 45 options.fileKey = "file"; 46 options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); 47 options.mimeType = "image/jpeg"; 48 var ft = new FileTransfer(); 49 ft.upload( 50 imageURI, 51 encodeURI('http://192.168.93.114:1988/shandongTree/upload.jsp'), 52 function(){ alert('上传成功!');}, 53 function(){ alert('上传失败!');}, 54 options); 55 } 56 57 58 /**********下载相片***********/ 59 function downloadPic(sourceUrl,targetUrl){ 60 var fileTransfer = new FileTransfer(); 61 var uri = encodeURI(sourceUrl); 62 63 fileTransfer.download( 64 uri,targetUrl,function(entry){ 65 var smallImage = document.getElementById('smallImage'); 66 smallImage.style.display = 'block'; 67 smallImage.src = entry.fullPath; 68 },function(error){ 69 console.log("下载网络图片出现错误"); 70 }); 71 } 72 73 74 function localFile() { 75 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){ 76 //创建目录 77 fileSystem.root.getDirectory("file_mobile/download", {create:true}, 78 function(fileEntry){ }, 79 function(){ console.log("创建目录失败");}); 80 81 var _localFile = "file_mobile/download/testtest4.jpg"; 82 var _url = "http://192.168.93.114:1988/shandongTree/download.jsp?pId=13"; 83 //查找文件 84 fileSystem.root.getFile(_localFile, null, function(fileEntry){ 85 //文件存在就直接显示 86 var smallImage = document.getElementById('smallImage'); 87 smallImage.style.display = 'block'; 88 smallImage.src = fileEntry.fullPath; 89 }, function(){ 90 //否则就到网络下载图片! 91 fileSystem.root.getFile(_localFile, {create:true}, function(fileEntry){ 92 var targetURL = fileEntry.toURL(); 93 downloadPic(_url,targetURL); 94 },function(){ 95 alert('下载图片出错'); 96 }); 97 }); 98 99 }, function(evt){ 100 console.log("加载文件系统出现错误"); 101 }); 102 } 103 104 </script> 105 </head> 106 <body> 107 <!-- pege 1 --> 108 <a data-inline='true' 109 href="javascript:fromCamera(pictureSource.PHOTOLIBRARY)" data-role="button">来自相册</a> 110 <a data-inline='true' 111 href="javascript:fromCamera(pictureSource.CAMERA)" data-role="button">来自相机</a> 112 <a data-inline='true' 113 href="javascript:localFile()" data-role="button">显示缓存图片，没有则下载</a> 114 <a data-inline='true' 115 href="javascript:uploadFile()" data-role="button">上传图片</a> 116 <div style='height:200px;width:200px;border:1px solid green;align:center;'> 117 <img 118 style="width: 160px; height: 160px;" id="smallImage" 119 src="" /> 120 </div> 121 </body> 122 </html>
