`
renjie120
  • 浏览: 237917 次
  • 性别: Icon_minigender_1
  • 来自: 上海
博客专栏
D11bba82-ec4a-3d31-a3c0-c51130c62f1c
Java应用集锦
浏览量:22942
社区版块
存档分类
最新评论

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

阅读更多

正在做一个跨平台的应用,需要使用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> 

<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

    这个DEMO不仅涵盖了PhoneGap和HTML5的基础知识,还涉及到了前端开发中的图片处理、文件上传和错误处理等多个重要环节,对于想要学习如何使用PhoneGap和HTML5开发移动应用的开发者来说,是一个很好的实践案例。...

    PhoneGap Cordova 3 3配置demo

    另外要说的是 我加的这个jar包是包含了源码的 所以文件有800多K 如果大家嫌弃大的话 自己自己去百度下载别人导的jar包 我等下上传可以直接用Eclipse导jar包的工程包 本人的下载积分快没了 所以设置5个资源分 大家...

    phonegap android 录音照相录像 demo

    `FileTransfer`对象则负责将文件上传到服务器。 9. 实际应用中的注意事项: - 需要在AndroidManifest.xml中添加相应的权限,比如录音需要`&lt;uses-permission android:name="android.permission.RECORD_AUDIO" /&gt;`,...

    phonegap demo

    PhoneGap Demo是一个基于PhoneGap框架的实际应用示例,旨在帮助开发者了解如何利用PhoneGap技术创建跨平台的移动应用程序。PhoneGap是由Adobe开发的一款开源框架,它允许开发者使用HTML5、CSS3和JavaScript来构建...

    phonegap5.4.1(cordova)拍照并且上传功能的一个Android应用demo

    Cordova是PhoneGap的核心,它是一个原生的移动开发平台,使得Web技术能够访问设备的功能,如摄像头、文件系统和网络。本Android应用Demo展示了如何在基于PhoneGap 5.4.1的项目中实现拍照并上传功能,同时包含了Java...

    Phonegap调取系统录像demo

    这个“Phonegap调取系统录像demo”是PhoneGap的一个实例,展示了如何在应用程序中调用设备的摄像头进行视频录制,并获取录制后的视频在手机本地的存储路径。 首先,我们要了解PhoneGap的媒体接口(Media API),这...

    PhoneGap Build的使用

    1. **上传源代码**:登录到PhoneGap Build后,选择“Create App”,按照指引上传你的项目文件。通常情况下,你需要将项目的`www`目录压缩成ZIP格式后上传。 2. **配置应用信息**:在PhoneGap Build中配置应用的基本...

    hellophonegap demo

    学习这个“hellophonegap demo”,你可以了解如何设置基本的PhoneGap项目结构,如何编写JavaScript代码来响应PhoneGap事件,以及如何使用PhoneGap API与设备硬件进行交互。这将为你进一步探索复杂的PhoneGap应用开发...

    cordova barcodescanner 仿微信样式并支持从相册选取

    2. 安装完插件后将二维码的lib包替换为zxing.lib,jar包在我上传的demo里面有。 3. 将demo中的drawable图片拷贝到自己项目中,然后再依次拷贝layout布局文件夹,raw文件夹(此文件夹下是扫描成功后发出的声音),values...

    WeX5简明教程-插件应用.docx

    功能:支持文件的上传和下载操作。 调用名称:`window.FileTransfer` 示例路径:`/UI2/system/api/native` 8. **文件打开** - `cordova-open` 功能:用于打开音频、视频、图片等不同格式的本地或远程文件。 ...

Global site tag (gtag.js) - Google Analytics