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:
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <form action="/test.cgi" enctype="multipart/form-data" method="post">
      <input name="myFile" type="file" />
      <div id="results">
      </div>
    </form>
  </body>
</html>

This is the Javascript file myFrom.js:
$(document).ready(function() { 
  $('form').ajaxForm(
    {
       beforeSubmit: function() {
         $('#results').html('Submitting...');
       },
       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
#!/usr/bin/ruby
require 'cgi'

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

value = cgi['myFile']   # <== value string for 'field_name'
puts value.read                  # <== 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.

Comments

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

    ReplyDelete
  2. hahaha let me try first.... wish it works.
    (^^'a...

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

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

    (god bless u, author). :D

    ReplyDelete
  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!

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

    please help!!

    ReplyDelete
    Replies
    1. Need include jquery library

      Delete
    2. Import jquery.js look at jquery.com

      Delete
  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?

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

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

    Let me try this code first :)

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

    ReplyDelete
  10. Copy - Paste nubs, all of U

    ReplyDelete
  11. ITS NOT WORKING ..

    ANYONE:
    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.. ^^,

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

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

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


    thanks

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

    ReplyDelete
  15. thanx. work fine also for me

    ReplyDelete
  16. Brilliant, thanks!

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

    ReplyDelete
  18. I dont know anything about ruby :((

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

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

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

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

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

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

    ReplyDelete

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 \usepackage{chngpage} \begin{table}     \begin{adjustwidth}{-.5in}{-.5in}          \begin{center}         \begin{tabular}{|c|}             \hline And here comes a very long line. And here comes a very long line. And here comes a very long line.  \\             \hline         \end{tabular}         \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. }         \label{myTable}         \end{center}     \end{adjustwidth} \end{table}
Read more

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 2010 Asked for letters: September 2010 CV, Research Statement, Preprint/publications/thesis Draft of Research Statement August/September 2010 CV: first version in 2008, career services, periodically updated Jobs are advertised on https://www.mathjobs.org/ http://notable.math.ucdavis.edu/wiki/Mathematics_Jobs_Wiki Discussed everything with my advisor, proof-read by a
Read more