AJAX file upload

Actually i didnt find the way to upload files with AJAX. And may be its not possible. Here i did a tricks by adding form attribute [ target=”addImageFrame” ] where addImageFrame is a dummy iframe’s ID. SO whenever this form is being submitted its actually tageting that iframe and the page becomes unchanged. Here i’m using AJAX only to track wheather the file is uploaded or not and if upload complete AJAX is just returning the file name and path.

Here when you’l test it you will see a progressbar on it. This is also fake actually. Its not the actual progressbar for uploading an images. When i’m sending request for images upload i’m setting that progress bar image and when i get the image path i’m removing that image. This is not the 100% accurate progressbar but its pretty well enough. I’l write about progressbar later.

Here is the Demo

3 Responses to “AJAX file upload”

  1. Ehsan Haque Says:

    Do you think it is workign? I tried uploading a file. As soon as I select a file, it shows a text File Upload Successful or something like that, but the status bar stops in the middle to process the upload!

    Cheers!

  2. Stranger Says:

    Here I’m only accepting Images. Though there was some hints at my post but at the demo page i didnt mentioned (images only for test). And thats why you get the messaage (”Upload Unsuccessfull. xxxxxxxx”). However I put some instruction at the demo page. Thanks for your help. Keep visiting..

  3. Mark Says:

    I understand the work strategy. Its really a greate works. I tasted many times everytimes its upload the fieles but sometimes it shows the previous images. I’m sure its for the Bandwidth problem. Whenever i tried from fast bandwidth it shows me the perfect result with upload the images. So i think it would be better if you can wait somehow to show the results and then show preview.

    Cos in low bandwidth it takes time to upload but your JS try to show the images. Thats all

    However nice effort.

Leave a Reply