0

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.

gorn
  • 8,097
  • 5
  • 37
  • 44
  • 1
    Take a look at http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery which has some solutions for upload files with jQuery – mguymon Mar 17 '12 at 01:11
  • Looks like I have to use plugins. – gorn Mar 17 '12 at 01:21

2 Answers2

0

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.

gorn
  • 8,097
  • 5
  • 37
  • 44
-1

TMHO if you display an image (even a preview) in a website, the image has to be server side, even if you want to emulate the preview aspect you'll have to upload it (but you can do it in an asynchronous way just look at AJAX uploading solutions for that).

EDIT: Look at Steven comment below. Nowadays this is feasible.

AsTeR
  • 7,247
  • 14
  • 60
  • 99
  • Yes, when I say ajax POST; it should be clear I mean to upload it to a server, which I have up and running. Just need the Jquery details to do that. If a plug-in is required; which is considerd best or amongs the best. – gorn Mar 17 '12 at 01:36
  • Sorry I misunderstood when you talked about "preview before submit". Doing it is quite a mess, I wanted to achieve a such feature in a quick way few weeks ago, I finally go back to the basic upload. – AsTeR Mar 17 '12 at 01:38
  • I'm using another button (other than form submit) to perform the ajax operation, which is what I mean by "preview before submit". Did you try uploadify or plupload? – gorn Mar 17 '12 at 01:51
  • I've tried JQUploader and Uploadify (if my memory is correct), my problem was to make them work with Zend Framework. – AsTeR Mar 17 '12 at 02:00
  • 1
    This is not the case anymore. Using client side JS, you can preview image before upload: http://www.codeforest.net/html5-image-upload-resize-and-crop – Steven Dec 16 '14 at 13:55