我遇到的问题是,同一段代码在浏览器中正常工作但不能在设备上运行。
以下代码在浏览器中正常运行
HTML
<form id="snapitform" name="snapitform" action="" enctype="multipart/form-data" method="post" >
<input type="file"><br>
<br />
<div>Your Name</div>
<input type="text" id="yourname" />
<br />
<div>Phone Number</div>
<input type="text" id="phonenumber" />
<br />
<input type="button" value="Upload Snap IT Service" onclick="GetImageBLOBObjectFromFile(); return false;" />
<br />
<div id="snapitresult">
</div>
</form>
的JavaScript
function GetImageBLOBObjectFromFile() {
var dataURL;
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
dataURL = reader.result;
console.log("dataURL: "+ dataURL);
var sPicData = dataURItoImageJPGBlob(dataURL);
var sLanguage = "EN";
var sLongitude = "56.324319";
var sLatitude = "25.133403";
var sLocation = "Some location";
var sName = $("#yourname").val();
var sPhoneNumber = $("#phonenumber").val();
var sNotify = "Y";
var objForm = document.getElementById('snapitform');
SnapITServiceAPI.InitializeValues();
SnapITServiceAPI.getSnapITUploadService(objForm, sLanguage, sLongitude, sLatitude, sLocation, sName, sPhoneNumber, sNotify, sPicData);
}
if (file) {
reader.readAsDataURL(file);
} else {
dataURL = "";
}
}
function dataURItoImageJPGBlob(dataURI) {
console.log("dataURItoImageJPGBlob().. " );
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}
/* -------------------SnapITServiceAPI ------------------------------- */
getSnapITUploadService: function(objForm, sLanguage, sLongitude, sLatitude, sLocation, sName, sPhoneNumber, sNotify, sPicData) {
var requestMode = 'UPLOADSERVICE';
var objFormData = new FormData(objForm);
objFormData.append('requestmode',requestMode);
objFormData.append('user',ApplicationConfig.getUserName());
objFormData.append('pass',ApplicationConfig.getUserPassword());
objFormData.append('lang',sLanguage);
objFormData.append('curlongitude',sLongitude);
objFormData.append('curlatitude',sLatitude);
objFormData.append('curlocation',sLocation);
objFormData.append('yourname',sName);
objFormData.append('phonenumber',sPhoneNumber);
objFormData.append('notify',sNotify);
objFormData.append('picdata',sPicData);
$.ajax({
type: "POST",
url: ApplicationConfig.getUATServerURL(),
dataType: "text",
mimeType:"multipart/form-data",
data: objFormData ,
processData: false,
crossDomain: true,
contentType: false,
cache: false,
success: this.OnSnapITReachITUploadSuccess,
error: this.OnSnapITReachITUploadError,
complete: this.OnSnapITReachITUploadComplete
});
return false;
}
现在使用PhoneGap / Cordova,我有以下代码拍照并通过上面的代码上传。
navigator.camera.getPicture(function (imageData) {
var smallImage = document.getElementById('snapItPicToUpload');
smallImage.style.display = 'block';
smallImage.src = imageData; //display Pic on the device then proceed for upload
window.resolveLocalFileSystemURI(imageData, gotFileEntry,
function (message) {
alert('Failed URI FileSystem: ' + message);
});
}, function (message) {
alert('Failed because: ' + message);
}, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
targetWidth: 100,
targetHeight: 100
});
var gotFileEntry = function(fileEntry) {
alert("got image : " + fileEntry.fullPath);
fileEntry.file( function(file) {
var reader = new FileReader();
reader.onloadend = function() {
alert("Read complete!");
sessionStorage.setItem("fileUpload", JSON.stringify(reader.result));
};
reader.readAsDataURL(file);
}, function (messgae) {
alert('Failed inside FileEnter: ' + message);
});
};
当我拍照并将其提交给服务器时,我会收到内存不足错误消息。(错误代码:00346)。
我的代码有问题或者我必须在从设备调用时更改某些内容。
不幸的是,我无法访问后端/服务器端。我刚刚得到消费服务。所以我不知道它们是如何在服务器端实现的。