phonegap文件，目录操作以及网络上传，下载文件（含demo）

来源：互联网发布：java编写用户注册编辑：程序博客网时间：2024/06/10 21:03

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

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

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

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

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

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

Html代码  
<!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>  

0 0