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

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

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

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

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

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

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

  

phonegap文件,目录操作以及网络上传,下载文件(含demo)的更多相关文章

  1. 在Windows上使用终端模拟程序连接操作Linux以及上传下载文件

    在Windows上使用终端模拟程序连接操作Linux以及上传下载文件 [很简单,就是一个工具的使用而已,放这里是做个笔记.] 刚买的云主机,或者是虚拟机里安装的Linux系统,可能会涉及到在windo ...

  2. pure-ftpd管理FTP服务器,创建文件夹可以,但上传下载文件不行

    两种原因 1.因为pure-ftpd的防火墙端口问题 # Port range for passive connections replies. - for firewalling. PassiveP ...

  3. SFTP上传下载文件、文件夹常用操作

    SFTP上传下载文件.文件夹常用操作 1.查看上传下载目录lpwd 2.改变上传和下载的目录(例如D盘):lcd  d:/ 3.查看当前路径pwd 4.下载文件(例如我要将服务器上tomcat的日志文 ...

  4. 在windows中使用PuTTy上传下载文件和目录

    打开windows的cmd,使用cd命令切换到PuTTy安装目录 C:\Users\NUC>cd C:\Program Files\PuTTY 在cmd中使用pscp命令上传下载文件 windo ...

  5. 向linux服务器上传下载文件方式收集

    向linux服务器上传下载文件方式收集 1. scp [优点]简单方便,安全可靠:支持限速参数[缺点]不支持排除目录[用法] scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ...

  6. shell通过ftp实现上传/下载文件

    直接代码,shell文件名为testFtptool.sh: #!/bin/bash ########################################################## ...

  7. 【liunx命令】上传下载文件的方法

    scp   帮助命令: man scp   scp功能: 下载远程文件或者目录到本地, 如果想上传或者想下载目录,最好的办法是采用tar压缩一下,是最明智的选择.   从远程主机 下载东西到 本地电脑 ...

  8. 【WCF】利用WCF实现上传下载文件服务

    引言     前段时间,用WCF做了一个小项目,其中涉及到文件的上传下载.出于复习巩固的目的,今天简单梳理了一下,整理出来,下面展示如何一步步实现一个上传下载的WCF服务. 服务端 1.首先新建一个名 ...

  9. 上传下载文件到Linux服务器

    转自链接:https://blog.csdn.net/drdongshiye/article/details/89430535Mac的终端是十分强大 , 可以通过命令进行上传下载下载文件夹 scp - ...

随机推荐

  1. ios基础篇(十六)——UIWebView的基本使用

    UIWebView是内置的浏览器控件,可以用它来浏览网页.打开文档等.UIWebView是一个混合体,具体的功能控件内置的,实现一些基本的功能.UIWebView可以查看Html网页,pdf文件,do ...

  2. ios基础篇(十二)——UINavgationController的使用(三)ToolBar

    UIToolBar存在于UINavigationController导航栏控制器中,而且默认被隐藏:设置UINavigationController的toolbarHidden属性可显示UIToolB ...

  3. Windows Store App 获取文件及文件夹列表

    通过使用13.2.1小节给出的方法和属性,不仅可以对用户库中的文件和文件夹进行操作,还可以获取其中所有的文件或者文件夹,比如为了完整地展现整个音乐库,可以获取并列举出音乐库中所有的音乐文件,以便能够在 ...

  4. UE3:SkeletalMesh的绘制流程

    [目标] SkeletalMesh的绘制流程 [思路] 1 顶点缓冲流 静态数据流向 动态数据流向(紫红色箭头) 2 FGPUSkinVertexFactory.ShaderDataType.Bone ...

  5. Dispatcher.Invoke方法

    前一篇小猪分享过在WPF中简单的使用BackgroundWorker完成多线程操作!在那篇中小猪利用了BackgroundWorker组件对耗时比较多的操作放在了单独的BackgroundWorker ...

  6. UOJ Test Round 1

    第一题: 题目大意: 给出N个字符串,字符串的前面部分都是字母且都是一样的,后面部分是数字,按照后面的数字排序.N<=10000 解题过程: 1.第一题是真良心,一开始的做法是把后面的数字分离出 ...

  7. Documentum常见问题11-xplore全文检索时找不到相关内容

    最近帮助同事处理了一个关于全文检索的问题,随手记录下来供以后参考. 问题一 某些Cabinet下的文件可以全文检索到,但某些Cabinet下的数据全文检索不成功. 新建了一个Docbase-AADCT ...

  8. Windows 下java环境变量的配置(Windows7 ,8,8.1,10)

    Windows 下java环境变量的配置 在“系统”面板的左上角选择“高级系统设置”,在弹出的系统属性中选择”高级“项,然后点击右下角的“环境变量(N)...”,就此进入JAVA环境变量的配置. 如果 ...

  9. 实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端

    转自:http://www.cnblogs.com/fengyun99/p/3541254.html 上一篇,介绍了二维码生成的机制,紧接着,我们就要开发手机客户端来识别这个二维码. 二维码,实际上是 ...

  10. json全套

    JS文件 function pager1_InitData() { //基础配置 $("#pager1").myPagination({ currPage: 1, pageCoun ...