Multiple forms in one page using jQuery-File-Upload -


i trying add multiple forms associates different types of document when try add file second form shows in primary form submission , process event. please advise wrong here.

<form accept-charset="utf-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post">   <div class="input-append" >     <input class="filestyle" did="pdoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-1" />   </div>   <input id="document_doc_type" name="document[doc_type]" type="hidden" value="1" /> </form><script id="template-upload-1" type="text/x-tmpl">   <div class="upload">     {%=o.name%}<span class="pull-right" id="pbar">uploading 0%</span></span>     <div class="progress"><div class="bar" style="width: 0%"></div></div>   </div> </script> <div id="pdoc"></div>   <form accept-charset="utf-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post">   <div class="input-append" >     <input class="filestyle" did="ldoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-2" />   </div>   <input id="document_doc_type" name="document[doc_type]" type="hidden" value="2" /> </form><script id="template-upload-2" type="text/x-tmpl">   <div class="upload">     {%=o.name%}<span class="pull-right" id="pbar">uploading 0%</span></span>     <div class="progress"><div class="bar" style="width: 0%"></div></div>   </div> </script> <div id="ldoc"></div>  <script type="text/javascript">     $(function () {       $('.documents').fileupload({         dropzone: $(this).find('input:file'),         datatype: 'script',         fileinput: $(this).find('input:file'),         singlefileuploads: true,         add: function(e, data) {           var file, types;           types = /(\.|\/)(pdf|xls|xlsx)$/i;           file = data.files[0];           if (types.test(file.type) || types.test(file.name)) {             uid = $(this).find(':file').attr('uid');             if ($('#' +uid).length > 0) {               data.context = $(tmpl(uid, file).trim());             }             did = $(this).find(':file').attr('did');             $('#' + did).append(data.context);             data.submit();           } else {             alert("" + file.name + " not pdf or excel file.");           }         },         progress: function (e, data) {           if (data.context) {             var progress = parseint(data.loaded / data.total * 100, 10);             data.context.find('.bar').css('width', progress + '%');             if (progress < 100) {               data.context.find('#pbar').html('uploading ' + progress + '% ...');             } else {               data.context.find('#pbar').html('upload complete');             }           }         }       });     $(document).bind('drop dragover', function (e) {       e.preventdefault();     });   }); </script> 

the variable 'this' use ambiguous , might cause problem. simplest solution initiate each form separately - in loop on results of $('.documents') or if expecting 2 forms give each of them id doc1 , doc2 , build fileupload each.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -