5 Replies - 3929 Views - Last Post: 29 January 2011 - 02:31 AM

#1 flint0131  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 84
  • Joined: 12-January 11

jQuery upload image

Posted 27 January 2011 - 11:08 AM

I have this image upload form. What I'm trying to do is upload the image using my avatar_upload.php and it will return the json value, but everytime I try to upload my avatar_upload.php returns {"success": true, "errorCode": 1} which means that the user just typed avatar_upload.php on the address bar.
Here's my code :

HTML //
<form id="avatar_upload" action="ava_upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="avatar_img" />
</form>



jQuery //
$(document).ready(function () {
   // to upload onchange
   $("#avatar_upload").change(function () {
        $.post("avatar_upload.php", $("#avatar_upload").serialize(), function(data) {
              alert(data); // alerts {"success": true, "errorCode": 1}
        });
        /**
         * I also tried this
         **/
        /**
         * $.ajax({
         *     method: 'POST',
         *     url: 'avatar_upload.php',
         *     data: $("#avatar_upload").serialize(),
         *     success: function(data) {
         *        alert(data);
         *     }
         * });
   });
});



Is This A Good Question/Topic? 0
  • +

Replies To: jQuery upload image

#2 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: jQuery upload image

Posted 27 January 2011 - 12:20 PM

Since Javascript does not have access to your client's file system, you can't upload an image through AJAX. However, you can simulate AJAX-behaviour by using a hidden iframe, from which you post the file.

Hope it helps! :)
Was This Post Helpful? 0
  • +
  • -

#3 Guest_Guest*


Reputation:

Re: jQuery upload image

Posted 27 January 2011 - 08:59 PM

I was thinking about that, but the problem is how can I target it to an iframe?
Was This Post Helpful? 1

#4 flint0131  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 84
  • Joined: 12-January 11

Re: jQuery upload image

Posted 27 January 2011 - 09:01 PM

I was thinking about that, but the problem is how can I target it to an iframe?
Was This Post Helpful? 0
  • +
  • -

#5 flint0131  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 84
  • Joined: 12-January 11

Re: jQuery upload image

Posted 28 January 2011 - 12:27 AM

Anybody can help? Just making the browser alert what avatar_upload.php's response after uploading. :/

This post has been edited by flint0131: 28 January 2011 - 12:34 AM

Was This Post Helpful? 0
  • +
  • -

#6 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: jQuery upload image

Posted 29 January 2011 - 02:31 AM

Simply specify "target" in the form, should work. :)

Example:
<form id="MyForm" action="Upload.php" method="post" enctype="multipart/form-data" target="UploadFrame">
    <input type="file" id="MyFile" name="MyFile" />

    <input type="submit" value="Upload" />

    <iframe id="UploadFrame" name="UploadFrame" src="Upload.php"></iframe>
</form>



To notify the user that the upload is taking place you may want to hijack the onsubmit-event on the form and perform additional functionality.

To notify the user that the upload has finished simply call back to the main window from Upload.php. You can access the main window from the iframe using window.parent in a Javascript. :)

You should be able to find a complete example of this by googling "Ajax image upload iframe" or something.

Hope it helps! :)

This post has been edited by Wimpy: 29 January 2011 - 02:32 AM

Was This Post Helpful? 2
  • +
  • -

Page 1 of 1