Way to make custom file upload field content with javascript in HTML5?

Question

I'm using the FormData to upload images using the following strategy using AJAX way:

So, if I upload an image, I can make an <input type="file" /> and then:

formData.append("userfile", fileInputElement.files[0]);

So, the content of fileInputElement.files[0] depends on the file I choose in the browser.

But I want to change the file. Maybe for the purpose of size compression, or trimming, or other transform.

I want to do these operation in the client side.

Maybe I may use canvas to do the transform, and finally got a base64 encoded image.

Is there any way to upload that image, as a natural way?

Maybe as the below form:

var getCustomFileContent = function(base64image) {
    // ... How
}

formData.append('img_field', getCustomFileContent(base64image));

Is this possible? How?

http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server — Richard Peterson, Sep 23 '15 at 03:30
@RichardPeterson thank you, that question solve a part of my question. But more, is there any way to make a `Blob` object from a base64 image, rather than posting the base64 string? — Alfred Huang, Sep 23 '15 at 03:36
http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript :-) — Richard Peterson, Sep 23 '15 at 03:42

0 Answers0