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

来源：互联网发布：剑三明教成女脸型数据编辑：程序博客网时间：2024/06/06 17:52

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

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

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

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

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

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

本文含有的方法：

1.使用phonegap进行相机，相册调用，选择图片并显示

2.使用phonegap进行文件上传和下载

3.使用phonegap进行目录，文件的操作

<!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>

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("创建目录失败");});

0 0