引自：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>