我正在开发一个Android应用程序。有一个选项可以使用相机捕获图像，然后选择现有图像从移动设备中获取图像。但是，当我尝试将路径传递给服务器时，它显示不同的位置
捕获图片：这里我得到的确切路径或完整路径如file:///storage/sdcard0/DCIM/Camera/13212343.jpg
选择现有：我在这里得到的是content://media/external/images/media/4572
那么可以将此路径发送到服务器吗？如果我发送像这样，Java程序可以识别这个文件？请帮我。我想将带有图像的2个参数发送到后端。
uploadSubmit() This is the function for send to servlet.
我的代码
<!DOCTYPE html>
<html>
<head>
<title>Ran Sample Testing</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
//js
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
// Get image handle
var largeImage = document.getElementById('largeImage');
// Unhide image elements
document.getElementById("section3_part1").style.display= 'none';
document.getElementById("section3_part2").style.display='block';
largeImage.style.display = 'block';
// Show the captured photo ... The inline CSS rules are used to resize the image
largeImage.src = imageURI;
xyz = imageURI;
}
// A button will call this function
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, saveToPhotoAlbum: true,
destinationType: destinationType.FILE_URI });
}
// A button will call this function
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onSuccessFun, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
function onFail(message) {
alert('back to home: ' + message);
}
function uploadSubmit(){
var uploadingImage = document.getElementById('largeImage');
var imgUrl = uploadingImage.src;
//alert("upload submition started third"+ FILE_URI);
options = new FileUploadOptions();
// parameter name of file:
options.fileKey = "my_image";
// name of the file:
options.fileName = imgUrl.substr(imgUrl.lastIndexOf('/') + 1);
// mime type:
options.mimeType = "image/jpeg";
params = { val1: "some value", val2: "some other value" };
options.params = params;
ft = new FileTransfer();
ft.upload(imgUrl, "http://externalurl.com/uploadServlet", success, fail, options);
}
function success(message) {
alert("Your photo uploaded successfully.");
}
function fail(message) {
alert("Failed because: " + message);
}
//ready function starts
$( document ).ready(function() {
$('#section1').animate({ "top": "0px" }, 300);
//image rotaion
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$('#largeImage').css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
var autoHgt = $('#largeImage').height;
$(' .imageBox').css({"height": autoHgt});
};
$('.leftRotation').click(function() {
rotation -= 90;
$('#largeImage').rotate(rotation);
});
$('.rightRotation').click(function() {
rotation += 90;
$('#largeImage').rotate(rotation);
});
// section 2 popup
$("#section2_Popup").bind( "click", function() {
$('#section1').animate({ "top": "-999px" }, 300);
$('#section2').animate({ "top": "0px" }, 300);
$('#section3').animate({ "top": "-999px" }, 300);
$('#section4').animate({ "top": "-999px" }, 300);
$("#section1").css({"display":"none"});
$("#section2").css({"display":"block"});
$("#section3").css({"display":"none"});
$("#section4").css({"display":"none"});
});
// section 3 part 1 popup
$( "#section3_Popup" ).bind( "click", function() {
var usrName = $("#inUserName").val();
$('#section1').animate({ "top": "-999px" }, 300);
$('#section2').animate({ "top": "-999px" }, 300);
$('#section3').animate({ "top": "0px" }, 300);
$('#section4').animate({ "top": "-999px" }, 300);
$("#section1").css({"display":"none"});
$("#section2").css({"display":"none"});
$("#section3").css({"display":"block"});
$("#section4").css({"display":"none"});
displayName(usrName);
});
// section 3 part2 popup
$( "#uploadImg" ).bind( "click", function() {
$('#section1').animate({ "top": "-999px" }, 300);
$('#section2').animate({ "top": "-999px" }, 300);
$('#section3').animate({ "top": "-999px" }, 300);
$('#section4').animate({ "top": "0px" }, 300);
$("#section1").css({"display":"none"});
$("#section2").css({"display":"none"});
$("#section3").css({"display":"none"});
$("#section4").css({"display":"block"});
$("#section3_part1").css({"display":"block"});
$("#section3_part2").css({"display":"none"});
});
// section 3 part2 popup cancel
$( "#cancelUpload" ).bind( "click", function() {
$('#section1').animate({ "top": "-999px" }, 300);
$('#section2').animate({ "top": "-999px" }, 300);
$('#section3').animate({ "top": "0px" }, 300);
$('#section4').animate({ "top": "-999px" }, 300);
$("#section1").css({"display":"none"});
$("#section2").css({"display":"none"});
$("#section3").css({"display":"block"});
$("#section4").css({"display":"none"});
$("#section3_part1").css({"display":"block"});
$("#section3_part2").css({"display":"none"});
});
//back button
$( "#backBtn" ).bind( "click", function() {
$('#section1').animate({ "top": "-999px" }, 300);
$('#section2').animate({ "top": "-999px" }, 300);
$('#section3').animate({ "top": "0px" }, 300);
$('#section4').animate({ "top": "-999px" }, 300);
$("#section1").css({"display":"none"});
$("#section2").css({"display":"none"});
$("#section3").css({"display":"block"});
$("#section4").css({"display":"none"});
$("#section3_part1").css({"display":"block"});
$("#section3_part2").css({"display":"none"});
});
// name display
function displayName(userName){
var element=document.getElementById("user_name");
element.innerHTML="Welcome "+userName;
var element=document.getElementById("hiddenname");
element.value=userName;
}
// input box image from library
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#largeImage').attr('src', e.target.result);
$('#section3_part1').css({'display':'none'});
$('#section3_part2').css({'display':'block'});
$('#largeImage').css({'display':'block'});
}
// reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile").change(function(){
readURL(this);
});
});
</script>
<style type="text/css">
.wrapper{
position: relative;
}
#section2, #section3, #section4, #section3_part2{
display: none;
}
#section1, #section2, #section3, #section4{
position: absolute;
top: -999px;
width: 100%;
}
#largeImage{
display:none;
width:100%;
height:auto;
}
.imageBox{
width:80%;
height:auto;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="section1">
<span id="section2_Popup">START</span>
</div>
<div id="section2">
Enter Name: <input type="text" id="inUserName" placeholder="Enter your Name" required min="3"/> <button id="section3_Popup">Go</button>
</div>
<div id="section3">
<div id="section3_part1">
<button onclick="capturePhoto();">Capture Photo</button><br>
<!-- <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> -->
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<input type="file" name="From Mobile" id="inputFile"/>
</div>
<div id="section3_part2">
<div class="imageBox">
<img id="largeImage" src="index.png" />
</div>
<span class="leftRotation">left</span> <span class="rightRotation">right</span>
<button id="uploadImg">Upload</button>
<button id="cancelUpload">cancel</button>
</div>
</div>
<div id="section4">
<div id="user_name"></div>
<input type="hidden" id="hiddenname" />
Email id* : <input type="text" id="emailid" placeholder="Enter Email id" /><br/>
Phone* : <input type="text" id="phone" placeholder="Enter your phone number" /><br/>
Caption (optional) : <input type="text" id="captn" placeholder="Enter a caption" /><br/>
<button id="submitBtn" onClick="uploadSubmit()">SUBMIT</button>
<button id="backBtn">BACK</button>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
要获取确切位置，您可以在phonegap中使用filesystem api。所以你的上传代码看起来像
var fileuri ="";
function uploadSubmit(){
var uploadingImage = document.getElementById('largeImage');
var imgUrl = uploadingImage.src;
window.resolveLocalFileSystemURI(imgUrl , resolveOnSuccess, fsFail);
options = new FileUploadOptions();
// parameter name of file:
options.fileKey = "my_image";
// name of the file:
options.fileName = imgUrl.substr(imgUrl.lastIndexOf('/') + 1);
// mime type:
options.mimeType = "image/jpeg";
params = { val1: "some value", val2: "some other value" };
options.params = params;
ft = new FileTransfer();
ft.upload(fileuri , "http://externalurl.com/uploadServlet", success, fail, options);
}
function success(message) {
alert("Your photo uploaded successfully.");
}
function fail(message) {
alert("Failed because: " + message);
}
function resolveOnSuccess(entry) {
fileuri = entry.toURL();
//use fileuri to upload image on server
}
function fsFail(message) {
alert("Error Message: " + message+ "Error Code:" +message.target.error.code);
}