PhoneGap - FormData Ajax提交在设备上不起作用,但在浏览器中工作正常

时间:2014-11-10 20:26:48

标签: javascript android jquery ajax cordova

我遇到的问题是,同一段代码在浏览器中正常工作但不能在设备上运行。

以下代码在浏览器中正常运行

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)。

我的代码有问题或者我必须在从设备调用时更改某些内容。

不幸的是,我无法访问后端/服务器端。我刚刚得到消费服务。所以我不知道它们是如何在服务器端实现的。

0 个答案:

没有答案