[flint0131]

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);
         *     }
         * });
   });
});

[Wimpy]

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!

[flint0131]

I was thinking about that, but the problem is how can I target it to an iframe?

[flint0131]

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

[Wimpy]

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