javascript - Reading image capture files in PhoneGap - Stack Overflow

admin管理员组

文章数量:1435859

I'm working on a PhoneGap application that captures images using the camera and, later, uploads them. There are two modes of operation for camera in PhoneGap: raw base64 encoded data or a file URI.

The docs themselves say:

Note: The image quality of pictures taken using the camera on newer devices is quite good. Encoding such images using Base64 has caused memory issues on some of these devices (iPhone 4, BlackBerry Torch 9800). Therefore, using FILE_URI as the 'Camera.destinationType' is highly remended.

So I'm keen to use FILE_URI option. This works great and you can even show the images in IMG tags. The URL looks like this:

file://localhost/var/mobile/Applications/4FE4642B-944C-449BB-9BD6-1E442E47C7CE/tmp/photo_047.jpg

However, at some point later I want to read the contents of the file to upload to a server. I was going to do this using the FileReader type. This doesn't work and I think it's because I can't access the file at the URL above.

The error code I get back from readDataUrl is 1 > FileError.NOT_FOUND_ERR = 1;

Any ideas how I can get to the file? I tried just accessing the last part of the path (photo_047.jpg) based on another sample I saw but no luck.

I'm working on a PhoneGap application that captures images using the camera and, later, uploads them. There are two modes of operation for camera in PhoneGap: raw base64 encoded data or a file URI.

The docs themselves say:

Note: The image quality of pictures taken using the camera on newer devices is quite good. Encoding such images using Base64 has caused memory issues on some of these devices (iPhone 4, BlackBerry Torch 9800). Therefore, using FILE_URI as the 'Camera.destinationType' is highly remended.

So I'm keen to use FILE_URI option. This works great and you can even show the images in IMG tags. The URL looks like this:

file://localhost/var/mobile/Applications/4FE4642B-944C-449BB-9BD6-1E442E47C7CE/tmp/photo_047.jpg

However, at some point later I want to read the contents of the file to upload to a server. I was going to do this using the FileReader type. This doesn't work and I think it's because I can't access the file at the URL above.

The error code I get back from readDataUrl is 1 > FileError.NOT_FOUND_ERR = 1;

Any ideas how I can get to the file? I tried just accessing the last part of the path (photo_047.jpg) based on another sample I saw but no luck.

• javascript
• iphone
• ios
• cordova

Share Improve this question Follow edited Dec 16, 2011 at 20:00 WrightsCS 50.7k2323 gold badges138138 silver badges188188 bronze badges asked Oct 31, 2011 at 3:04 ConfusedNoobConfusedNoob 10.2k1414 gold badges6868 silver badges9494 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

I'm just getting started with PhoneGap, and given the age of this question you may have found an answer already, but I'll give it a try anyway.

First, would you be able to use the built-in FileTransfer object? It takes a file: URI as an argument.

If FileTransfer won't work for you, and you need to read the file data yourself, you'll need the PhoneGap File objects, like FileReader , as you said. But most of those expect a plain pathname -- not a URI -- to specify the file to work with. The reason you're getting NOT_FOUND_ERR is because it's trying to open a file named file:/localhost/var....

Here's a quick one-liner to extract the path part from your URI:

var path = /file:\/\/.*?(\/.*)/.exec(fileuri)[1];

Hope this helps!

The answer from jgarbers was of help to me but it did not solve the problem. I realized the camera stores photos in Temp folder instead of Document folder. Setting my local file system to temporary allowed it to find the correct location for the camera images.

window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, ...

...

window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, ...

...

var path = /file://.?(/.)/.exec(fileuri)[1];

Ref. above jgarbers and Rik answers (solution has been tested successfully on iOs 7)

you can user the file transfer plugin for uploading any file to the server.

//// pass your file uri to the mediafie param
function uploadFile(mediaFile) {
    var ft = new FileTransfer();
    path = mediaFile.fullPath;
    name = mediaFile.name;
////your service method url
    var objUrl = http://example.;


    ft.upload(path,
        objUrl,
        function (result) {
            alert("Success");


        },
        function (error) {
            alert('Error uploading file ' + path + ': ' + error.code);
        },
        { fileName: name });
}

本文标签： javascriptReading image capture files in PhoneGapStack Overflow