Multiple Attachments in SharePoint List Using Jquery

We will now explain the most important part of our Multiple upload attachment control in SharePoint List.

Please follow the below steps.

Step 1: Create List column like Attachment1 and datatype is single line text.

 

Step 2: Open List newform in SharePoint Designer 2013

Step 3: Add the below code under your list filed(Attachment1)

<div id="attachmentsOnAttachC2">
<input type="file" name="AttachC20" id="AttachC20" class="ms-longfileinput" size="56" title="fupldAttachDnbReport"></input>                                                                                                                                       
</div>
<input id="attachOKbutton2" type="BUTTON" onclick='CustomOkAttach(this,"AttachC2","Attachment1")' value="Upload" style="width: 12.8em;"/>                                                                                                                                               
<table id="idAttachmentsTable2" border="0" cellspacing="0" cellpadding="0"><tbody></tbody>                                        
</table>   

Step 4: Add below code in your script file or custom new form aspx page and add jquery reference files in your page.
<script type="text/javascript" src="../../Style Library/Scripts/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../../Style Library/Scripts/jquery.validate.min.js"></script>

<script type="text/javascript">

<!--code for Multiple Attachments starts -->

function CustomOkAttach(self,idprefix,fieldtitle){
                                                                a:;
                                                                var g=idprefix+String(FileUploadIndex);
                                                                var idobject=$(self).parent().find('input[id^='+idprefix+']').filter(function () { return $(this).css('display') != 'none' });
                                                                var id=$(idobject).length>0?$(idobject)[0].id:"";
                                                               
                                                                b=GetAttachElement(id),c=TrimWhiteSpaces(b.value);
                                                               
                                                               
                                                                if(!Boolean(c))
                                                                {
                                                                                alert(Strings.STS.L_FileNameRequired_TXT);
                                                                                b.focus()
                                                                }
                                                                else
                                                                {
                                                                                var j=c.substring(c.lastIndexOf("\\")+1);
                                                                                if(IndexOfIllegalCharInUrlLeafName(j)!=-1){
                                                                                                alert(Strings.STS.L_IllegalFileNameError);
                                                                                                return
                                                                                }
                                                                                var attachmenttable=$(self).parent().find('table');
                                                                                //find('div[id$="'+idprefix+'"]');
                                                                               
                                                                                var d=document.getElementById(attachmenttable[0].id).insertRow(-1),h="attachRow"+String(FileUploadIndex);
                                                                                d.id=h;
                                                                                var e=d.insertCell(-1);
                                                                                e.className="ms-vb";
                                                                                e.innerHTML='<span dir="ltr">'+c+"</span>&nbsp;&nbsp;&nbsp;&nbsp;";
                                                                                var f=d.insertCell(-1);
                                                                                f.className="ms-propertysheet";
                                                                                var l=document.getElementsByName("RectGifUrl")[0];
                                                                                f.innerHTML='<span class="ms-delAttachments"><IMG SRC=\''+l.value+"'>&nbsp;<a href='javascript:CustomRemoveLocal(\""+h+'","'+id+"\",\""+fieldtitle+"\",\""+attachmenttable[0].id+"\",\""+j+"\")'>"+Strings.STS.L_Delete_Text+"</a></span>";
                                                                                b.style.display="none";
                                                                                ++FileUploadIndex;
                                                                                ++FileUploadLocalFileCount;
                                                                                var attachmentOnClient=$(self).parent().find('div[id$="'+idprefix+'"]');

                                                                                var i=attachmentOnClient[0],a=document.createElement("input");
                                                                                a.tabIndex=1;
                                                                                a.type="File";
                                                                                a.className="ms-longfileinput";
                                                                                a.title=Strings.STS.L_FileUploadToolTip_text;
                                                                                a.name=idprefix+String(FileUploadIndex);
                                                                                a.id=idprefix+String(FileUploadIndex);
                                                                                a.size=56;
                                                                                i.appendChild(a);
                                                                                var k=b.form;
                                                                                k.encoding="multipart/form-data";
                                                                               
                                                                                /*if(navigator.userAgent.toUpperCase().indexOf('MSIE') >= 0){
                                                                          $(b).replaceWith($(b).clone(true));
                                                                     } else
                                                                     {
                                                                        $(b).val('');
                                                                     }*/
                                                                                var fieldval=($('input[title="'+fieldtitle+'"]').val()==""?"":$('input[title="'+fieldtitle+'"]').val()+",")+j;
                                                                                $('input[title="'+fieldtitle+'"]').val(fieldval);
                                                                                                                                                               
                                                                                //document.getElementById("idAttachmentsRow").style.display="";
                                                                                ShowPart1()
                                                                }
                                               
                                                }
                                                function CustomRemoveLocal(rowid,fuid,fieldtitle,idAttachmentsTableid,filename)
                                                {
                                                                //try
                                                                //{
                                                                                a:;
                                                                                var c=document.getElementById("idAttachmentsRow");
                                                                                var a=document.getElementById(idAttachmentsTableid);                                                                          
                                                                                a.deleteRow(document.getElementById(rowid).rowIndex);
                                                                                var b=GetAttachElement(fuid);
                                                                                if(typeof b!="undefined"&&typeof b.rows.length!="undefined"&&b.rows.length==0)
                                                                                                b.parentNode.removeChild(b);
                                                                                $('input[title="'+fieldtitle+'"]').val($('input[title="'+fieldtitle+'"]').val().replace(filename,"").replace(',,',',').trimcomma());
                                                                               
                                                                                //if(typeof a!="undefined"&&typeof a.rows.length!="undefined"&&a.rows.length==0)c.style.display="none";
                                                                                if(FileUploadLocalFileCount>0)--FileUploadLocalFileCount;
                                                                //}
                                                                //catch(e)
                                                                //{
                                                                                //alert(e.message);
                                                                //}         
                                                }
                                                String.prototype.trimStart = function (c) {
                                                                if (this.length == 0)
                                                                return this;
                                                                c = c ? c : ',';
                                                                var i = 0;
                                                                var val = 0;
                                                                for (; this.charAt(i) == c && i < this.length; i++);
                                                                return this.substring(i);
                                                }
                                               
                                                String.prototype.trimEnd=function(c)
                                                {
                                                                c = c?c:',';
                                                                var i=this.length-1;
                                                                for(;i>=0 && this.charAt(i)==c;i--);
                                                                return this.substring(0,i+1);
                                                }
                                                String.prototype.trimcomma=function(c)
                                                {
                                                                return this.trimStart(c).trimEnd(c);
                                                }


                                                <!--Multiple attachment function end-->
                                               

   
                                              
                                               
</script>







Step 5: Save the form.It's done.