|
需求如下:
可以选择本地图片,或者从相机选择图片,并进行显示在本地,然后上传到服务器,以及可以从服务器下载图片显示出来,如果本地之前下过,从缓存中取之前的文件。
对于相机本地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>
复制代码 |
|