Original

This is two Part Series At First Part I will show you a method through which you can implement Multiple file attachment.
In Part 1 I will show you Design Related Part while in Part II I will show Development and Coding.

There are two things.
1. Attachment
2. Upload

Attachment should be more than one at a time at client side and then we should finally Upload all attached files.

SharePoint also provides a JavaScript File through which we can implement Multiple file attachment feature. FORM.JS file provides method through you can attach multiple file at a time. Recently I have also implemented "jquery.MultiFile.js" plugin for same purpose.

using FORM.JS File
Before using FORM.JS File we need to digg something about it. FORM.JS file is located in TEMPLATE\1033 Folder.
so,

Below is the structure of the Attachment Form and Flow.
Clicking the “Attach File” link at the top of the form calls a JavaScript function UploadAttachment() .
It hides Part1 section and show partAttachment section. 

Select a file for attachment and click OK. But Wait... these files are actually not uploaded, they are only attached.

SharePoint uses a  variable called “FileUploadIndex” which it uses to keep track of how many attachments are present. The ID for each files becomes “fileupload” concatenated with the current “FileUploadIndex” .  fileID=FileuploadString+FileUploadIndex

When you click the OK button it calls the “OKAttach()” function that performs the following tasks:

When you click the OK button to attach your file, SharePoint calls the “OKAttach” function that performs the following tasks:

First it creates a new row in "idAttachmentsTable" containing the file path and the link to delete the file
Creates a new file field inside idAttachmentsTable incrementing 1 to the “FileUploadIndex”. 
so if you had just uploaded first file (fileupload0), it will create fileupload1. It creates two TD one for filename and another for Delete Link
  
  var L_FileUploadToolTip_text="Name";
  oRow=document.getElementById("idAttachmentsTable").insertRow(-1); 
  
  RowID='attachRow'+FileUploadIndex;
  oRow.id=RowID;
  oCellFileName=oRow.insertCell(-1);
  oCellFileName.className="ms-vb";
  oCellFileName.innerHTML="<span dir=\"ltr\">"+filename+"</span>&nbsp;&nbsp;&nbsp;&nbsp;";
  oCellControl=oRow.insertCell(-1);
  oCellControl.className="ms-propertysheet";
  oCellControl.innerHTML="<IMG SRC='"+document.getElementsByName("RectGifUrl").item(0).value+   "'>&nbsp;<a href='javascript:RemoveLocal("+RowID+",\""+fileID+   "\")'>"+L_Delete_Text+"</a>";
  fileInput.style.display="none";
++FileUploadIndex;

  oAttachments=document.getElementById("attachmentsOnClient");
  var inputNode=document.createElement("input");
  inputNode.tabIndex="1";
  inputNode.type="File";
  inputNode.className="ms-longfileinput";
  inputNode.title=L_FileUploadToolTip_text;
  inputNode.name=FileuploadString+FileUploadIndex;
  inputNode.id=FileuploadString+FileUploadIndex;
  inputNode.size="56";
  oAttachments.appendChild(inputNode);
  var theForm=fileInput.form;
  theForm.encoding='multipart/form-data';
  document.getElementById("idAttachmentsRow").style.display="";
  ShowPart1();

So by using the same method you can also design the same look and fee Page like SharePoint NewForm.aspx with attachment functionality.

using JQuery jquery.MultiFile.js Plugin
This is the easiest one :)

<asp:Content ID="contentScriptsHeader" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
     <!--Add JQuery Library-->
     <script type="text/javascript" src="../js/jquery.1.4.2.js"></script>
     <script type="text/javascript" src="../js/jquery.MultiFile.js" ></script>
</asp:Content>

<asp:Content contentplaceholderid="PlaceHolderMain" runat="server">
<span id="partAttachment">
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
        <tbody>
            <tr>
                <td class="ms-formlabel" valign="top" width="190" height="50">File Name </td>
                <td class="ms-formbody" valign="bottom" width="400" height="15">
                    <span dir="ltr"></span>
                     <asp:FileUpload ID="inputFile" runat="server" class="multi" style="width: 350px"></asp:FileUpload>
                 </td>
             </tr>
         </tbody>
     </table>
</span>
</asp:Content>

It will show you the Page like below



you can delete/add more files also.
you can download this JQuery Plugin from http://www.fyneworks.com/jquery/multiple-file-upload/

In Part II I will show you how to upload all attached files to sharePoint List.

till then bye