SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Uploading Files with AJAX

    For uploading files with html forms, all that is needed is a server side script to fetch the file. Also the <form> tag within the html document needs to have the multipart/form-data value for the enctype attribute. This all works fine, but the page needs to be refreshed.

    Is this possible to do with XMLHTTP (AJAX)? The server side script would work the same way since POST values are being sent.

    Is it possible to set the upload with xmlhttp?
    I can't believe I ate the whole thing

  2. #2
    SitePoint Evangelist dscriptor's Avatar
    Join Date
    Oct 2005
    Location
    in front of my computer
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i guess it is possible. Gmail.com can do it...
    happy is the man that finds wisdom....wisdom in {PHP}.


  3. #3
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible? Yes, I know this for a fact.

    Can I tell you how to do it? Sadly, no. It's on my list of things to learn how to do (right up near the top, in fact!), but haven't gotten around to it yet. Try Googling for it.

  4. #4
    Non-Member
    Join Date
    Sep 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Google it... there has to be an answer somewhere...

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going out on a limb and saying that you can't do it with AJAX. Why? Javascript has no access to the file data - without having some custom component installed on each client.

    What you might be able to do is - use <input type="file"> tags in a hidden iframe, which acts independently to the main page. Here's an illustration of my idea:
    Code:
    <html>
    <head>
    <title>background uploadNew Page</title>
    <script type="text/javascript">
    window.onload = function() {
    	window.frames["uploadFrame"].document.write("<html><body><form method='post' encoding='application/x-www-form-urlencoded' action='upload.php'></form></body></html>");
    }
    
    var fileCount = 0;
    
    function attach() {
    	var childDoc = window.frames["uploadFrame"].document;
    	var finp = childDoc.createElement("input");
    	finp.type = "file";
    	finp.name = "uploader" + fileCount++;
    	childDoc.forms[0].appendChild(finp);
    	finp.click();
    }
    
    function uploadFiles() {
    	window.frames["uploadFrame"].document.forms[0].submit();
    }
    </script>
    </head>
    <body>
    <a href="javascript:;" onclick="attach();">Attach a file</a><br/>
    <a href="javascript:;" onclick="uploadFiles();">Upload</a><br/>
    <div id="upload" style="display:none;">
    	<iframe name="uploadFrame"></iframe>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the hidden iframe idea on albumconnect.com. When someone uploads a picture, ajax saves it to the server, in the meantime the user is presented with a new iframe to the same upload page, where he can start uploading the next picture.

  7. #7
    SitePoint Addict
    Join Date
    Jan 2006
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would think that you would have a form to browse your local directory and choose a file.. then when submit is hit, instead of submitting the form, use AJAX to send the value to the php script which would process it just like it was normal, and output a response back to the page so you can update the user on the progress.
    If you give someone a program,
    you will frustrate them for a day;
    if you teach them how to program,
    you will frustrate them for a lifetime.

  8. #8
    SitePoint Member
    Join Date
    Aug 2003
    Location
    California
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you cannot use ajax to perform a file upload - you must do an actual submit of of form. the technique people use is to have a hidden iframe to accomplish it. tools like yahoo's ui connection object automatically handle the creation of the iframe and submission for cases like this...


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
  •