Question

hitting a road block on this.

what I have so far:

  <input id="newFile" type="file"/>
  <span style="background-color:orange;" onClick="newImage()">HEYTRY</span>

This is obviously not very far.

I am looking for a basic way to load this image into a variable, convert the variable to something passable via a URL (ajax) and then accomplish my goal via php once it can extract the bits from the url.

not as easy as I anticipated.

any help would be great.

thanks

Answer 1

This won’t work for every browser, but it’s a nice way of doing multiple file uploads via AJAX:

function upload_files(entityKey, files, url, progress_callback) {
  var xhr = new XMLHttpRequest(), formData = new FormData();
  xhr.upload['onprogress'] = progress_callback;

  formData.append('entityKey', entityKey);
  $.each(files, function(i, file) { formData.append('file[]', file);});

  xhr.open("post", url, true);
  xhr.setRequestHeader("Cache-Control", "no-cache");
  xhr.send(formData);
}

The entityKey is an example of a parameter on the server. The ‘files’ parameter comes from the ‘files’ attribute of the file-type input form element (as an array to support multiple). The ‘progress_callback’ parameter is a function that takes an object that has (at least) a ‘loaded’ and a ‘total’ field (unit is bytes). It doesn’t care about the server response.