PhoneGap中文网

 找回密码
 立即注册
查看: 21040|回复: 3
打印 上一主题 下一主题

phonegap上传文件,phonegap下载文件,目录操作以及上传相册文件

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-10-20 21:20:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
需求如下:
可以选择本地图片,或者从相机选择图片,并进行显示在本地,然后上传到服务器,以及可以从服务器下载图片显示出来,如果本地之前下过,从缓存中取之前的文件。

对于相机本地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. <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
  10. <script type="text/javascript" charset="utf-8">
  11.         document.addEventListener("deviceready", onDeviceReady, false);
  12.         var pictureSource; //  getPicture:数据来源参数的一个常量
  13.         var destinationType; // getPicture中:设置getPicture的结果类型
  14.         function onDeviceReady() {
  15.                  pictureSource = navigator.camera.PictureSourceType;
  16.                 destinationType = navigator.camera.DestinationType;
  17.         }

  18.         var pickUrl;
  19.         function fromCamera(source){
  20.                 navigator.camera.getPicture(function(imageURI){
  21.                                 var largeImage = document.getElementById('smallImage');
  22.                                 largeImage.style.display = 'block';
  23.                                 largeImage.src = imageURI;  
  24.                                 pickUrl = imageURI;
  25.                         }, function(){
  26.                                 if(source==pictureSource.CAMERA)
  27.                                         console.log('加载照相机出错!');
  28.                                 else
  29.                                         console.log('加载相册出错!');
  30.                         }, {
  31.                                 quality : 50,
  32.                                 destinationType : destinationType.FILE_URI,
  33.                                 sourceType : source
  34.                 });
  35.         }

  36.    /*********上传图片***************/
  37.         function uploadFile() {   
  38.                 var imageURI = pickUrl;
  39.                 if(!imageURI)
  40.                         alert('请先选择本地图片');
  41.                 var options = new FileUploadOptions();
  42.                 options.fileKey = "file";
  43.                 options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
  44.                 options.mimeType = "image/jpeg";  
  45.                 var ft = new FileTransfer();
  46.                 ft.upload(
  47.                                                 imageURI,
  48.                                                 encodeURI('http://192.168.93.114:1988/shandongTree/upload.jsp'),
  49.                                                 function(){ alert('上传成功!');},
  50.                                                 function(){ alert('上传失败!');},
  51.                                                 options);
  52.         }


  53.         /**********下载相片***********/
  54.         function downloadPic(sourceUrl,targetUrl){
  55.                 var fileTransfer = new FileTransfer();
  56.                 var uri = encodeURI(sourceUrl);  

  57.                 fileTransfer.download(
  58.                 uri,targetUrl,function(entry){
  59.                         var smallImage = document.getElementById('smallImage');
  60.                         smallImage.style.display = 'block';
  61.                         smallImage.src = entry.fullPath;
  62.                 },function(error){
  63.                         console.log("下载网络图片出现错误");
  64.                 });  
  65.         }


  66.         function localFile() {
  67.         window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
  68.                         //创建目录
  69.                          fileSystem.root.getDirectory("file_mobile/download", {create:true},
  70.                                 function(fileEntry){ },
  71.                                 function(){  console.log("创建目录失败");});

  72.                          var _localFile = "file_mobile/download/testtest4.jpg";
  73.                          var _url = "http://192.168.93.114:1988/shandongTree/download.jsp?pId=13";
  74.                          //查找文件
  75.                          fileSystem.root.getFile(_localFile, null, function(fileEntry){
  76.                                 //文件存在就直接显示
  77.                                 var smallImage = document.getElementById('smallImage');
  78.                                 smallImage.style.display = 'block';
  79.                                 smallImage.src = fileEntry.fullPath;  
  80.                         }, function(){  
  81.                                 //否则就到网络下载图片!
  82.                                 fileSystem.root.getFile(_localFile, {create:true}, function(fileEntry){
  83.                                         var targetURL = fileEntry.toURL();
  84.                                         downloadPic(_url,targetURL);
  85.                                  },function(){
  86.                                         alert('下载图片出错');
  87.                                  });
  88.                         });
  89.         
  90.                 }, function(evt){
  91.                         console.log("加载文件系统出现错误");
  92.                 });
  93.     }

  94. </script>
  95. </head>
  96. <body>
  97.         <!-- pege 1 -->
  98.                  <a data-inline='true'
  99.                                 href="javascript:fromCamera(pictureSource.PHOTOLIBRARY)" data-role="button">来自相册</a>
  100.                         <a data-inline='true'
  101.                                 href="javascript:fromCamera(pictureSource.CAMERA)" data-role="button">来自相机</a>
  102.                         <a data-inline='true'
  103.                                 href="javascript:localFile()" data-role="button">显示缓存图片,没有则下载</a>
  104.                         <a data-inline='true'
  105.                                 href="javascript:uploadFile()" data-role="button">上传图片</a>
  106.                                 <div style='height:200px;width:200px;border:1px solid green;align:center;'>
  107.                         <img
  108.                                 style="width: 160px; height: 160px;" id="smallImage"
  109.                                 src="" />   
  110.                                 </div>
  111. </body>
  112. </html>
复制代码
回复

使用道具 举报

1

主题

9

帖子

37

积分

新手上路

Rank: 1

积分
37
沙发
发表于 2013-11-12 15:29:41 | 只看该作者
回复 支持 反对

使用道具 举报

0

主题

12

帖子

52

积分

注册会员

Rank: 2

积分
52
板凳
发表于 2015-5-13 11:28:56 | 只看该作者
我就哈哈了  
回复 支持 反对

使用道具 举报

1

主题

17

帖子

54

积分

注册会员

Rank: 2

积分
54
地板
发表于 2015-5-13 11:12:19 | 只看该作者
收藏了学习了 顺便顶一下前辈
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-6 00:46 , Processed in 0.097673 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表