Question

This is a general question about using Ajax on data that is not text/string.

Is it possible to do a JQuery Ajax POST request with a selected image in a form? This is to preview a processed image, taken from form input, before submit. The image is posted to a server doing some image processing and will return the img html.

For example:

var img = $('#form').find('input:first, select:first').first(); // the image/file input
$.ajax({

type: "POST",
url: "photoprocess.php",
data: "{prephoto: '" + img+ "'}", // ??
contentType: "application/jpeg; charset=utf-8",
dataType: "text",
success: function (response) {
var imgHtml = response.d;
$('#preview').empty();

$('#preview').append(""+imgHtml);
},
......

If a plugin is required, which one should I go for? Or better phrased: is there a plugin which you have good experience with for this solution?

Cheers.

Answer 1

There are not standard way to do this, and therefore not very good practice to use some random plugin or dubious work-around. Ended up solving it on the server side mainly by requiring users to first submit the select photo in order to progress for theme previews (where the server already has a copy of the raw image) and ordering.