0

I have a html form which sends POST data to my PHP script

It also uses AJAX to provide a preview as they complete the form

However the form uses onsubmit=""

The issue i have is one of the html inputs is an image.

the form is as below to give you an idea:

<form method="post" action="scripts/test.php" enctype="multipart/form-data">
<input type="hidden" name="size" id="size" value="small" />
<input type="hidden" name="type" id="type" value="1" />
<input type="hidden" name="pos" id="pos" value="front" />
<input type="hidden" name="number" id="number" value="none" />
<input type="hidden" name="name" id="name" value="none" />
<label>Choose Your First Shirt Colour</label><br /> <input class="color" value="ff3300" id="colour1" name="colour1" onchange="change()">
<br /><br />
<label>Choose Your Second Shirt Colour</label><br />
<input class="color" value="FFFFFF" id="colour2" name="colour2" onchange="change()">
<br /><br /><label>Add Your Logo: <br />
<span style="font-size:11px;color:#FF0000;">(if you are having trouble adding your logo please contact us on 0845 6018370)</span></label>
<br />
<input type="file" name="logo" id="logo" onchange="change()"/><br /><br />
<label>Add Your Text:</label><br />
<textarea name="text" cols="30" id="text" rows="5" onchange="change()"></textarea><br />
<label><span style="color:#000000;">Quantity: </span></label>
<input type="text" id="quantity" name="quantity" value="1" style="width:40px;height:20px;"/><br /><br />
<input type="button" name="preview" value="Preview" onclick="MyPreview()"/><br />
<input type="submit" name="submit" value="Submit" />
</form>

I am using

var logo =document.getElementById("logo").value;

for the image but when i am sending the logo value through to PHP it breaks the image as it isn't the correct post value required to be sent through to the PHP script as though you are submitting the form.

Does anyone know how to get the same post value for the logo html field simply by using onchange and javascript?

Liam Sorsby
  • 2,912
  • 3
  • 28
  • 51
  • Nettuts wrote a great article about this. This should help you: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/ – S.Visser Apr 17 '13 at 08:41
  • possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) (Sadly I can't find a good question about doing this without jQuery, but [MDN has a good article on the subject](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Uploading_a_user-selected_file). – Quentin Apr 17 '13 at 08:42
  • you should specify that you're looking for a solution that is compatible with IE 6 and IE 7 or conversely that you can't use new HTML5 features – STT LCU Apr 17 '13 at 09:25

2 Answers2

0

If I understood it correctly, you just want to display a preview of the image as the file input's value gets changed, right?

If so, I guess want you want to do is just to load a preview of the image from the user's local drive, without it really uploaded to your server yet. The actual file upload can be done when the user already submits the form.

To do the said process (loading a preview of the image file), HTML5's FileReader API.

Using the FileReader API is actually simple, and it can be done like so:

Javascript

var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file
// File validations here (you may want to make sure that the file is an image)

var reader = new FileReader();
reader.onload = function(data) {
  // what you want to do once the File has been loaded
  // you can use data.target.result here as an src for an img tag in order to display the uplaoded image
  someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically
}
reader.readAsDataURL(logo);

You can place this code inside your onchange event handler, and I guess you won't be needing AJAX in here.

Then when the form gets submitted, the image data can be obtained in its usual place, in the $_FILES array.

Arnelle Balane
  • 5,437
  • 1
  • 26
  • 32
  • unfortunately due to cross compatability i am unable to use the HTML5 option as it isn't supported in ie 6/7. Good shout though – Liam Sorsby Apr 17 '13 at 08:54
  • why are you still developing for ie 6 and 7? drop them at once, and spare you a lot of trouble. – STT LCU Apr 17 '13 at 09:00
  • @LiamSorsby Well, yeah that really is a problem, but there are several polyfills out there that might cover up for that, just like https://github.com/Jahdrien/FileReader and many others. Just saying, though ;) – Arnelle Balane Apr 17 '13 at 09:04
  • @STT LCU how can you say drop IE 6 and 7 surely cross compatability is a MUST. – Liam Sorsby Apr 17 '13 at 09:14
  • @ArnelleBalane i've had a look at it but it uses flash which isn't good for mobile devices which is another issue. May have to resort to jquery – Liam Sorsby Apr 17 '13 at 09:14
  • http://www.w3schools.com/browsers/browsers_explorer.asp this source says that IE7 + IE6 users accounts for the 1% globally of the internet users. You're basically wasting time. It's time to move on – STT LCU Apr 17 '13 at 09:20
  • @LiamSorsby Here's a good list of different polyfills for different needs: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills maybe one of those helps. – Arnelle Balane Apr 17 '13 at 09:22
0

I think you have to upload the file to your server for preview too if you can't use the html5 features

(f)open your $_FILES['userfile']['tmp_name'] and sends it raw contents back, see: How can I use $.ajax to set image src to dynamic image/png data?. You can resize the image before sending the data back and delete the image afterwards.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224