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.
Labels:

Comments

  1. BartJanuary 7, 2011 at 4:16 PM

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

    ReplyDelete
  2. gumuruhsspjMarch 18, 2011 at 12:14 AM

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

    ReplyDelete
  3. gumuruhsspjMarch 18, 2011 at 12:34 AM

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

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

    (god bless u, author). :D

    ReplyDelete
  4. VickyJune 16, 2011 at 7:20 PM

    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. AnonymousAugust 10, 2011 at 6:42 PM

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

    please help!!

    ReplyDelete
    Replies
    1. AnonymousMay 17, 2012 at 4:46 AM

      Need include jquery library

      Delete
    2. AnonymousJuly 12, 2012 at 9:20 AM

      Import jquery.js look at jquery.com

      Delete
  6. AnandOctober 20, 2011 at 7:52 PM

    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. Blog nya dillahDecember 28, 2011 at 11:23 PM

    How i get file "myForm.js" ??

    ReplyDelete
  8. Blog nya dillahDecember 28, 2011 at 11:30 PM

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

    Let me try this code first :)

    ReplyDelete
  9. AvronoJanuary 19, 2012 at 3:51 AM

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

    ReplyDelete
  10. AnonymousFebruary 3, 2012 at 7:08 AM

    Copy - Paste nubs, all of U

    ReplyDelete
  11. AnonymousApril 13, 2012 at 2:57 PM

    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. AnonymousAugust 22, 2013 at 12:05 AM

      Can you explain more what's virtual classroom??

      Delete
  12. AnonymousMay 17, 2012 at 4:02 AM

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

    ReplyDelete
  13. fontgradeJune 7, 2012 at 7:12 AM

    it's working fine..for me <3


    thanks

    ReplyDelete
  14. AnonymousJuly 9, 2012 at 11:36 PM

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

    ReplyDelete
  15. AnonymousJuly 11, 2012 at 1:57 AM

    thanx. work fine also for me

    ReplyDelete
  16. AnonymousAugust 7, 2012 at 4:50 AM

    Brilliant, thanks!

    ReplyDelete
  17. UnknownAugust 24, 2012 at 11:04 AM

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

    ReplyDelete
  18. PiyushSeptember 21, 2012 at 9:04 AM

    It is not working on IE-8

    ReplyDelete
  19. UnknownFebruary 7, 2013 at 10:54 PM

    I dont know anything about ruby :((

    ReplyDelete
  20. AnonymousFebruary 13, 2013 at 5:23 AM

    Its working fine..Thanks a lot...

    ReplyDelete
  21. Pasang Iklan Gratis Tanpa DaftarFebruary 26, 2013 at 12:48 PM

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

    ReplyDelete
  22. Women IssueFebruary 26, 2013 at 12:52 PM

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

    ReplyDelete
  23. PombearMarch 19, 2013 at 1:33 PM

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

    ReplyDelete
  24. AnonymousApril 19, 2013 at 10:23 AM

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

    ReplyDelete
  25. AnonymousJuly 4, 2013 at 5:59 AM

    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 lo...
4 comments
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...
4 comments
Read more