Dynamic Web TWAIN: How to Upload Images with AJAX

Scenario

Some customers may want to upload images to a web server via form/AJAX. It is supported by Dynamic Web TWAIN.

Solution

Basically, the workflow would be like this:

  1. Scan images to the control.
  2. Use the method GetSelectedImagesSize to pre-calculate the file size of the scanned images.
  3. Use SaveSelectedImagesToBase64Binary to save the selected images in the buffer to a base64 string.
  4. Uploading them to the Server.

Code Sample

// Selecting Files to Upload:
DWObject.SelectedImagesCount = DWObject.HowManyImagesInBuffer;
for (var i = 0; i < DWObject.HowManyImagesInBuffer; i++) { // Loop through each of the images in the viewer.
         DWObject.SetSelectedImageIndex(i, i);
}
// Pre-calculate the size of the images:
DWObject.GetSelectedImagesSize(strImageType);

// Encode the images into a base64 string:
var imagedata = DWObject.SaveSelectedImagesToBase64Binary(); 
// Uploading images to the Server:
var param = encodeURIComponent("ImageName") + "=" + encodeURIComponent(uploadfilename) + "&" + encodeURIComponent("RemoteFile") + "=" + encodeURIComponent(imagedata);  
//You can upload the image data from here
makeRequest(strActionPage, param, false);
//AJAX
function makeRequest(url, parameter, flg) {
         if (window.XMLHttpRequest) {
                  xhr = new XMLHttpRequest();// Set up the request.
         }
         else {
                  if (window.ActiveXObject) {
                           try {
                           xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
                           }
                           catch (ex) {
                                    alert(ex);
                           }
                  }
         }
         if (xhr) {
                  if (flg) {
                           xhr.open("GET", url, true); // Open the connection.
                           xhr.onreadystatechange = requestresultCat;
                           xhr.setRequestHeader("If-Modified-Since", "0");
                           xhr.send(null);
                  }
                  else {
                           xhr.open("POST", url, false);
                           if (parameter != null) {
                           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                           xhr.send(parameter); // Send the Data.
                  }
         else {
                                    xhr.send(null);
                           }
                  }
         }
         else {
                  AppendMessage("<b>Sorry, but I couldn't create an XMLHttpRequest!</b> ");
         }
}
function requestresult() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) { // File(s) uploaded.
            var outMsg;
            if (xhr.responseXML && xhr.responseXML.documentElement) {
                outMsg = xhr.responseXML;
                alert(xhr.responseText);
            }
        }
    }
}
// File(s) uploaded.
Is this page helpful?

Leave a Reply

Your email address will not be published.