将base64图像转换为javascript中的文件或如何使用jquery ajax传递大的base64字符串

Question

This can't take any more of my time. I've tried to solve this a very long time now.

I will give you my whole scenario and then what the problem is.

I have this web site. On one page the user can choose between three image input types.

This is a radio button group:

o Twitter Logo
o Twitter Profile Picture
o Upload picture

If the user choose option 1 or 2, an img tag src is updated with a local-project file ( http://localhost:9000/public/images/image.png ) and this image src is stored in html5 Web Session Storage variable.

If the user choose option 3 he/she get to choose a file from their computer (a input type="file" appears under the radio group) and the img tag src is updated with this image. This time, the src that I will store in the session variable won't be a path to the file (which I know is because of security reasons) but the src will be a base64 string. A really big one if the user choose a big image.

So now I have this image stored in the session variable, either a path to the image file included in the project folder or a base64 encoded image.

What I do now is to fetch this value from the session variable in JavaScript. I want to pass this image to my code on the server side. For making an actual image of it and uploading it to places, but that part isnt really necessary.

My problem is that in JavaScript, I can't pass this with a POST using $.ajax . The base64 string is too big I think, and I can't figure out how I can convert it to something else, say a byte[].

How should I do? I want to pass this image that the user choose to the server side for further process. Then on the server side I want to convert it to an actual Image object, or BufferedImage.

Here's a code-block of how it looks now:

function gatherSessionValuesAndGenerateCode(userEmail) {
var email           = userEmail;
var category        = getSessionValue("category");
var itemName        = getSessionValue("itemName");
var service         = getSessionValue("service");
var accountName     = getSessionValue("accountName");
var action          = getSessionValue("action");
var imageType       = getSessionValue("imageType");
var imageFile       = getSessionValue("imageFile");
var expirationDate  = getSessionValue("expirationDate");



$.ajax({
    type: "POST",
    url: "http://localhost:9000/quikkly/business/create/generate",
    data: {
        email: email,
        category: category,
        itemName: itemName,
        service: service,
        accountName: accountName,
        action: action,
        imageType: imageType,
        imageFile: imageFile, //This is making me feel ill, don't know how to solve it.
        expirationDate: expirationDate

    },
    success: function(response){console.log("Horayyy "+response)}
});
}

Answer 1

ok i got your point but what i am trying to say is may be your string contains 20K characters but i don't think it can be larger than 2-3 Mb and i hope your server settings allows you to post data of size of 2-3 MB.

Apart from this i think putting the image path name in base_64 is not a good idea.If you think someone can steel the data from your seesion then he/she can do any thing with your complete website concept.

Because any how a person can see the image path even when you display some image over web page.

Still if you think you don't want path in seesion you can keep it in some file in key-value pair or you can keep it in database.

OR you can do one more thing just keep the image file name in your seesion data & prepend the exact path when you want to use it internally over server side.