SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: AJAX Upload

  1. #1
    SitePoint Enthusiast manish_er's Avatar
    Join Date
    Oct 2005
    Location
    Delhi : India
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX Upload

    Hello,

    Is there any way to upload file through AJAX?
    If yes, please refer some relevent code or links

    Thanks in advance

    Manish

  2. #2
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes and no. There is no way to upload a file via httprequest objects.
    What you need to do is put a hidden iframe on the page, us a standard file upload form using the iframe as a target, then submit to that. The recipient page can use some Javascript to notify the main page when the upload is complete. Fairly simple.
    Only dead fish go with the flow

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Umm.. my post is: http://www.sitepoint.com/forums/showthread.php?t=398512

    I don't think its "fairly" simple.
    I got the upload working however I'm struggling with getting the recipient to notify the main page when teh file is uploaded.
    Online Games - Play Free Online Games
    Arcade Games - Tons of Arcade Games
    Watermark Tool - Protect your Photos

  4. #4
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think its "fairly" simple.
    its not that bad..

    I managed to get it to work. I have the recipeint in an iframe, in the main page. I used the following code to send a message back when the file is uploaded:

    Code:
    pingsrc: function (id,status,filename){
      	parent.uploaderSrc.next(id,status,filename);
      }
    the uploaderSrc.next() functoin handles submitting the next form on the main page, and continuing the upload process...

    just call pingsrc() on the load event of your upload file.

    ..i can send you my code so far if you like? ..it works..i think

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow.. i think i figured it out ..
    I made it call a javascript function in parent like you said.
    It seems to be working.

    Very cool , didn't know u can call JS functions in parent from within a frame.

    Awesome, Thank You
    Armin Busatlic
    Online Games - Play Free Online Games
    Arcade Games - Tons of Arcade Games
    Watermark Tool - Protect your Photos

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2005
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you mind posting the code?, I'm starting to get a hold on AJAX and I have a few questions myself, and I'd like to learn a little more

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code for what?
    How to create httpObjects for AJAX?
    I can't post the entire code for my upload since its very big.

    PHP Code:
    <form id="formNamefile" method="POST" enctype="multipart/form-data" action="fileupload.php" target="iframefile">
    <
    input type="hidden" name="type" value="file" />
    <
    input type="hidden" name="id" value="file" />
    <
    input name="file" size="23" type="file" onChange="return fileUpload(this);" />
    <
    span id="uploadStatus"></span>
    <
    iframe name="iframefile" src="fileupload.php" width="1" height="1" style="display:none"> </iframe>
    </
    form
    Basically I use an <iframe src='upload.php'></iframe> where onChange event, I call a JS function to submit the form (formname.submit()) TO THE IFRAME meaning you have to put target = 'iframename' inside <form>. Then inside the PHP file i do the copy() of $_FILES to wherever the file is suppose to go.

    After copy succeeds I say something like :

    PHP Code:
    $scrpt "<script>";
    $scrpt .= "parent.getElementById('name').innerHTML = 'File Uploaded';";
    $scrpt .= "</script>";
    echo 
    $scrpt
    That basically sets the innerHTML of some element in the PARENT file that contains the status of the upload. (in my case the element is <span id='uploadstatus'></span>).

    Hope this helped...
    Online Games - Play Free Online Games
    Arcade Games - Tons of Arcade Games
    Watermark Tool - Protect your Photos

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2005
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks, of course it helps.

  9. #9
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey. I have attached my code to this post. It should work out the box. You just need to make sure u have the right permissions on the uploads folder.

    Its written in PHP, but it could easily be modified to work with another language.
    Attached Files Attached Files

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2005
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, I'll check it out.

    Thanks

  11. #11
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toasti
    Hey. I have attached my code to this post. It should work out the box. You just need to make sure u have the right permissions on the uploads folder.

    Its written in PHP, but it could easily be modified to work with another language.
    Am assuming this is your code (not someone else's you have used)? Are you releasing it open-source so people can use it as they like?

  12. #12
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup. its my code. the idea was dek's in the second post there.

    Its open source

  13. #13
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by manish_er
    Hello,

    Is there any way to upload file through AJAX?
    If yes, please refer some relevent code or links

    Thanks in advance

    Manish
    hay lam thank nhiu

  14. #14
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Toasti,

    I tried your ajaxuploader-b0.2 code. It's really fine. I uploaded files upto 10 mb easily. But when I tried to upload a 20 mb file, it failed. Is there any size limitation?

    Regards
    Nilanjan

  15. #15
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey. i see sitepoint have taken my code off here. If you want to download it you can get it at: www.38.co.za/38group/developers.php#ajax

  16. #16
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Toasti,

    I tried your ajaxuploader-b0.2 code. It's really fine. I uploaded files upto 10 mb easily. But when I tried to upload a 20 mb file, it failed. Is there any size limitation?
    the problem is that you need to change you php.ini settings so that you can upload a file larger than 10mb which is the default i believe. If you on windows then your php.ini is probably in c:\windows or another location that is in your PATH environment variable...

    I forget where it is in linux at the moment (or if there is one)
    its probably in /etc/php or something like that though


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •