First, let’s take a quick look at some js/jquery code, and learn how to process image data URI, create an asynchronous request, and post data to the server.
Then following up, the back end c# code will be provided as an example, and we will learn how to handle the request and save image to a directory on the server.
client-side code sample (js/jquery)
//upload method using plain javascript
function upload(url) {
var blob = getBlobData();
var form = new FormData();
var http = new XMLHttpRequest();
form.append('uploadImage', blob);
http.open("POST", url, true);
http.send(form);
}
//upload method using jquery
function upload_jq(url) {
var form = new FormData();
var blob = getBlobData();
form.append('uploadImage', blob);
$.ajax({
type: 'POST',
url: url,
data: form,
processData: false,
contentType: false,
cache: false,
success: function() {
alert('upload completed...');
},
error: function(data) {
alert('upload failed... ' + data);
}
});
}
// just a sample image data uri
var image_data_uri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==";
// helper functions
function b64ToUint6(nChr) {
return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 ? nChr - 71 : nChr > 47 && nChr < 58 ? nChr + 4
: nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
}
function base64DecToArr(sBase64, nBlocksSize) {
var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2,
taBytes = new Uint8Array(nOutLen);
for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
nMod4 = nInIdx & 3;
nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
if (nMod4 === 3 || nInLen - nInIdx === 1) {
for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
}
nUint24 = 0;
}
}
return taBytes;
}
function getImageFormat() {
var image_fmt = '';
if (image_data_uri.match(/^data\:image\/(\w+)/)) {
image_fmt = RegExp.$1;
} else {
throw "invalid image data uri";
}
return image_fmt;
}
function getBlobData() {
var image_fmt = getImageFormat();
var raw_image_data = image_data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
return new Blob([base64DecToArr(raw_image_data)], { type: 'image/' + image_fmt });
}
add buttons to call the js/jquery function
<input id="btnUploadJs" type="button" value="Upload (js)" />
<input id="btnUploadJQuery" type="button" value="Upload (jquery)" />
server-side code sample (c#)
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var file = Request.Files["uploadImage"];
if (file.InputStream != null && file.InputStream.Length > 0)
{
var fileName = string.Format("{0}_{1}.jpg", "image_uploaded", DateTime.Now.ToString("yyyymmdd_hhmmss"));
var filePath = string.Format("~/Upload/{0}", fileName);
file.SaveAs(Server.MapPath(filePath));
}
}
}
OK. Now we have a way to process the image data URI, asynchronously upload it and save a jpg image copy on the server every time the upload button is clicked.
Gary L 