JQuery ajax post jpg images in .net webservice. Image results are corrupted

I have a jQuery phonegap app that opens a camera and takes a picture.

Then I will post this image to the .net web service that I have coded.

I cannot use PhoneGap FileTransfer because it is not supported by Bada os, this is a requirement.

I have successfully uploaded an image from Phonegap FileSystem API, I bound it to .ajax: post type, I even got it from .net, but when .net saves the image to the server, the image results are corrupted

- → This is a valid Base64 encoded file, but there is this header "data: image / jpeg; base64, / 9j / 4AAQ ..... ="

How do I get rid of this header? should i trim it from .net or from ajax?

Any help would be appreciated.

This is my code:

navigator.camera.getPicture(onGetPictureSuccess, onGetPictureFail, { quality: 50, destinationType:Camera.DestinationType.FILE_URI });
window.resolveLocalFileSystemURI(imageURI, onResolveFileSystemURISuccess, onResolveFileSystemURIError);
fileEntry.file(gotFileSuccess, gotFileError);
new FileReader().readAsDataURL(file);

function onDataReadSuccess(evt) {
        var image_data = evt.target.result;
        var filename = unique_id();
        var filext = "jpg";

                type : 'POST',
                url : SERVICE_BASE_URL+"/fotos/"+filename+"?ext="+filext,   
                cache: false, 
                timeout: 100000, 
                processData: false, 
                data: image_data, 
                contentType: 'image/jpeg',
                success : function(data) {

                            console.log("Data Uploaded with success. Message: "+ data);


In my .net web service, this is the method that gets called:

public string FotoSave(string filename, string extension, Stream fileContent)
   string filePath = HttpContext.Current.Server.MapPath("~/foto_data/") + "\\" + filename;
   FileStream writeStream = new FileStream(filePath, FileMode.OpenOrCreate, FileAccess.Write);
   int Length = 256;
   Byte[] buffer = new Byte[Length];
   int bytesRead = readStream.Read(buffer, 0, Length);
   // write the required bytes
   while (bytesRead > 0)
      writeStream.Write(buffer, 0, bytesRead);
      bytesRead = readStream.Read(buffer, 0, Length);



source to share

1 answer

Ok, I got it working. The problem is that when we use $ .ajax (), the result is something that needs to fit into the text in the html, so for example you can put it directly in the tag

<textarea> background-image: data:data:image/jpeg;base64,/9j/4AAQ.....=</textarea>


But when trying Convert.FromBase64String (thestring) even .net tells you that "Invalid character in Base64 string".

In conclusion, leaving $ .ajax as it is, I changed my .net function like this:

 //Convert input stream into string
 StreamReader postReader = new StreamReader(inputStreamFromWebService);
 string base64String = postReader.ReadToEnd();
 if (base64String.StartsWith("data:"))
            //remove unwanted ajax header
            int indexOfBase64String = base64String.IndexOf(",") + 1;
            int lenghtOfBase64String = base64String.Length - indexOfBase64String;
            base64String = base64String.Substring(indexOfBase64String, lenghtOfBase64String);

  //Convert from base64 string to byte[]
  byte[] byteFromString;
  byteFromString = Convert.FromBase64String(base64String);
  MemoryStream stream = new MemoryStream(byteFromString);

  System.IO.FileStream outFile;
  outFile = new System.IO.FileStream(filePath, System.IO.FileMode.Create, System.IO.FileAccess.Write);
  outFile.Write(byteFromString, 0, byteFromString.Length);




All Articles