Skip to main content

Uploading a file with JQuery

You can easily submit data in an html form via jQuery's $.post. But you need to do a little more to upload a file. I suggest the jQuery Form Plugin.

Here is the HTML form:
    <form action="/test.cgi" enctype="multipart/form-data" method="post">
      <input name="myFile" type="file" />
      <div id="results">

This is the Javascript file myFrom.js:
$(document).ready(function() { 
       beforeSubmit: function() {
       success: function(data) {
         var $out = $('#results');
         $out.html('Your results:');
         $out.append('<div><pre>'+ data +'</pre></div>');

And here the cgi script "test.cgi" in Ruby
require 'cgi'

cgi =
puts cgi.header
puts "Here is the file you uploaded"

value = cgi['myFile']   # <== value string for 'field_name'
puts                  # <== body of value
puts value.local_path            # <== path to local file of value
puts value.original_filename     # <== original filename of value
puts value.content_type

Make sure that your cgi script has the right permission, 755. Of course you would first manipulate the data instead of just mirroring it.


  1. It's not working...
    And why form is after html ?

  2. hahaha let me try first.... wish it works.

  3. works...!! it workss...!!!!

    I used it in a jsp environment... and it works...!!

    (god bless u, author). :D

  4. Thanks for this post!!! I had to change some things up to refresh a DIV with an MVC Partial View, but this post definitely pointed me in the right direction! Thanks again!

  5. I get this error: $("form").ajaxForm is not a function

    please help!!

    1. Need include jquery library

    2. Import jquery.js look at

  6. How can we use this in a JSP environment? I need to know this urgently? I mean how can I submit this to a servlet and process the upload? Can someone please help?

  7. Replies
    1. The above codes is myForm.js.

  8. upsss..sorry, i dont read carefully..there's an explanation about file "myForm.js"

    Let me try this code first :)

  9. Nice, thanks ... not that hard .... do you mean "advice" not "advise" in your title ?

  10. Copy - Paste nubs, all of U


    can you teach me how to make a virtual classroom??
    or are there any sites where i can learn.
    i know very basic PHP,javascript.
    This is for my thesis.
    Hope SOMEONE GOOD will HELP.
    URGENT.. ^^,

    1. Can you explain more what's virtual classroom??

  12. well, but this is not ajax and in this case jquery is not necesary

  13. it's working fine..for me <3


  14. can you upload your js file which you include in you code

  15. thanx. work fine also for me

  16. Brilliant, thanks!

  17. Thanks Bro.... This is exactly what i want.
    Great help.. Thanks

  18. I dont know anything about ruby :((

  19. Its working fine..Thanks a lot...

  20. thanks for this tutorial, I like this and I want to practice this tutorial to my project website

  21. nice tutorial, and i will wait your next tutorial mo advance

  22. Can't you translate the test.cgi to php?
    I don't understand the buy script :/

  23. workssss!!!!!!! only in FF -.-''

  24. Thanks for this post!!!
    It works!
    Im using rails 3


Post a Comment

Popular posts from this blog

Latex: Centering table larger than textwidth

Usually, you can center tables with \center. But when the table is longer than the \textwidth, it will be align with the left side margin. You can temporarily adjust the textwidth.

% allows for temporary adjustment of side margins

And here comes a very long line. And here comes a very long line. And here comes a very long line.  \\

        \caption{This Table is longer than the text width. And its caption is really long, too. This Table is longer than the text width. And its caption is really long, too. This Table is longer than the text width. And its caption is really long, too. This Table is longer than the text width. }

Academic Job Search: Writing a good CV, research statement, and teaching statement

I won't give you boring details of how you should format your CV, there's enough resources out there that give you much better advise than I ever could, instead I will tell you what you can and should do during graduate school, to generate the content for your CV and statements.
Please keep in mind that I was specifically looking for post doctoral research positions in mathematical biology. If you want to land a teaching or tenure position, some rules might be different.
Job Application Timeline Academic Jobs beginning fall 2011 (June – September)Deadlines for postdocs: as early as November 2010Asked for letters: September 2010CV, Research Statement, Preprint/publications/thesisDraft of Research Statement August/September 2010CV: first version in 2008, career services, periodically updatedJobs are advertised on everything with my advisor, proof-read by advisor, several friends proof-rea…