我正在尝试使用PhoneGap创建一个iOS应用程序，允许用户将照片上传到Web服务器。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
// Do cool things here...
}
function getImage() {
// Retrieve image file location from specified source
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey="recFile";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI, "http://someWebSite.com/Testing/SaveImage.asmx/SaveImage", win, fail, options, true);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
alert("source = " + error.source);
alert("http_status = " + error.http_status);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
</script>
</head>
<body>
<button onclick="getImage();">Upload a Photo</button>
</body>
我的index.html文件有什么问题，或ASMX文件有问题吗？
每当我尝试在第4代iPod Touch上测试时，我都会收到以下错误消息：
2012-07-09 16:24:03.257 Test1[916:707] File Transfer Finished with response code 404
2012-07-09 16:24:03.260 Test1[916:707] FileTransferError {
code = 3;
"http_status" = 404;
source = "http://someWebSite.com/Testing/SaveImage.asmx/SaveImage";
target = "file://localhost/var/mobile/Applications/5DD01E68-02F7-410B-996A- 2D70BF1A61D3/tmp/cdv_photo_046.jpg";}
2012-07-09 16:24:07.137 Test1[916:707] ERROR: Plugin 'Debug Console' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
你可以按照这个例子Upload image from android phonegap to a server using asmx
要么
一个简单的例子
js
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<link rel="stylesheet" href="style.css" media="screen" />
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
</script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var myData = "";
$(document).ready(function() {
$("#getDataFromServer").click(function() {
var imageData = myData;
$.ajax({
type : "POST",
url : 'http://my.domain.name/saveImage.ashx',
data : {
image : imageData
},
beforeSend : function() {
$("#comment2").text("Start ajax " + imageData.length);
},
success : function(data) {
$("#comment2").text("Uploaded! " + data);
},
error : function(request, error) {
$("#comment2").text("Error! " + error);
}
});
});
})
function capturePhotoEdit(source) {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 50,
destinationType : destinationType.DATA_URL,
sourceType : source
});
}
function onFail(message) {
alert('Failed because: ' + message);
}
function onPhotoDataSuccess(imageData) {
console.log(imageData);
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
myData = imageData;
$("#comment").text(imageData.length);
}
</script>
<h1>Hello World</h1>
<p>
<a href="#" onclick="capturePhotoEdit(pictureSource.PHOTOLIBRARY);">get
image</a>
</p>
<p>
<a href="#" id="getDataFromServer">send image</a>
</p>
<span id="comment2"></span>
<img style="display: none; width: 100px; height: 100px;"
id="smallImage" src="" />
<span id="imagename"></span>
<span id="comment"></span>
asp.net处理程序saveImage.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Text;
namespace Recepies
{
/// <summary>
/// Summary description for saveImage
/// </summary>
public class saveImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
string filePath = "";
filePath = context.Server.MapPath(".");
string fileName = RandomString(10);
string myImage = context.Request.Form["image"];
if (myImage.Length > 0)
{
File.WriteAllBytes(filePath + "/upload/" + fileName + ".jpg", Convert.FromBase64String(myImage));
context.Response.ContentType = "text/plain";
context.Response.Write("File was saved - " + fileName + ".jpg");
}
else
{
context.Response.ContentType = "text/plain";
context.Response.Write("File was not saved");
}
}
catch (Exception ex)
{
context.Response.ContentType = "text/plain";
context.Response.Write(ex.Message);
}
}
private static Random random = new Random((int)DateTime.Now.Ticks);//thanks to McAden
private string RandomString(int size)
{
StringBuilder builder = new StringBuilder();
char ch;
for (int i = 0; i < size; i++)
{
ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)));
builder.Append(ch);
}
return builder.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
我一直有同样的问题（在iOS7上）。对我有用的解决方案是添加“saveToPhotoAlbum”参数。
navigator.camera.getPicture(success, fail, {
quality: 80,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
saveToPhotoAlbum: true
});