We often need to upload a file without refreshing page or even before user submits the complete form.<\/p>\n
We have been using flash uploaders or i-frames to achieve that. However now it is possible to upload a file using only ajax and javascript.<\/p>\n
The first thing we need is a HTML form that will allow the user to select the file that they wish to upload. Lets create a form with file type in it<\/p>\n
In grails, we prefer to use g:form tag<\/p>\n
[java]
\n<g:form name="myForm">
\n <div>
\n <label for="name">
\n <strong>Name<\/strong>
\n <\/label>
\n <input id="name" name="name" type="text"\/>
\n <\/div>
\n <input type="file" name="inputFile">
\n<\/g:form>
\n[\/java]<\/p>\n
We can even use a normal form tag:<\/p>\n
[java]
\n<form method="post" enctype="multipart\/form-data">
\n <div>
\n <label for="name">
\n <strong>Name<\/strong>
\n <\/label>
\n <input id="name" name="name" type="text"\/>
\n <\/div>
\n <input type="file" id="inputFile" name="inputFile">
\n<\/form><\/p>\n
[\/java]<\/p>\n
Now lets include jQuery form plugin which will provide us functionality to upload files using ajax<\/p>\n
Now all we need to do is call ajaxSubmit method, which is provided by jQuery form plugin Cheers!<\/p>\n Mansi Arora<\/p>\n mansi[at]intelligrape[dot]com<\/p>\n","protected":false},"excerpt":{"rendered":" We often need to upload a file without refreshing page or even before user submits the complete form. We have been using flash uploaders or i-frames to achieve that. However now it is possible to upload a file using only ajax and javascript. The first thing we need is a HTML form that will allow […]<\/p>\n","protected":false},"author":79,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[7],"tags":[96,71,4840,55,1465],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14601"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=14601"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14601\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=14601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=14601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=14601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nwith options.
\n[java]
\n<script type="text\/javascript">
\n $(‘form’).ajaxSubmit({
\n async: true,
\n url: myCustomUrl,
\n success : function(){
\n ….. \/\/ Add your success handler code here
\n }
\n<\/script>
\n[\/java]
\nI also created a demo app<\/a>, showing this behaviour. Feel free to check it out. <\/p>\n