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
Post a Comment