Sharepoint 2010 multiple file attachments
http://www.c-sharpcorner.com/uploadfile/Freddy_Khalaf/multiple-attachment-custom-control-in-sharepoint/
http://newoinc.wordpress.com/2012/03/19/sharepoint-2010-attach-multiple-files-to-a-list-item/
https://www.nothingbutsharepoint.com/sites/eusp/pages/sharepoint-list-attachment-technical-brief.aspx
http://gilleslauwers.wordpress.com/2011/02/21/sharepoint-2010s-upload-multiple-documents-in-silverlight-part-1/

Finally I have used below solution
http://www.codeproject.com/Articles/24271/Multiple-File-Upload-User-Control

But since I wanted to separate out control styles in a css file, I have modified the GetJavaScript method as below




 

JavaScript.Append(
"var Item = document.createElement('div');\n");


// *** List item inline style ***


//JavaScript.Append("Item.style.backgroundColor = '#ffffff';\n");


//JavaScript.Append("Item.style.fontWeight = 'normal';\n");


//JavaScript.Append("Item.style.textAlign = 'left';\n");


//JavaScript.Append("Item.style.verticalAlign = 'middle'; \n");


//JavaScript.Append("Item.style.cursor = 'default';\n");


//JavaScript.Append("Item.style.height = 20 + 'px';\n");

JavaScript.Append(
"var Splits = IpFile.value.split('\\\\');\n");

JavaScript.Append(
"Item.innerHTML = Splits[Splits.length - 1] + ' ';\n");

JavaScript.Append(
"Item.value = IpFile.id;\n");

JavaScript.Append(
"Item.title = IpFile.value;\n");

JavaScript.Append(
"Item.className = 'fileitem';\n");


//JavaScript.Append("debugger;\n");


//JavaScript.Append("var A = document.createElement('a');\n");



JavaScript.Append(
"var A = document.createElement('div');\n");

JavaScript.Append(
"A.innerHTML = 'Delete';\n");

JavaScript.Append(
"A.id = 'A_' + Id++;\n");


//JavaScript.Append("A.href = '#';\n");


//JavaScript.Append("A.style.color = 'blue';\n");

JavaScript.Append(
"A.className = 'linkdiv';\n");



JavaScript.Append(
"A.onclick = function()\n");

JavaScript.Append(
"{\n");

JavaScript.Append(
"DivFiles.removeChild(document.getElementById(this.parentNode.value));\n");

JavaScript.Append(
"DivListBox.removeChild(this.parentNode);\n");

JavaScript.Append(
"if(MAX != 0 && GetTotalFiles() - 1 < MAX)\n");

JavaScript.Append(
"{\n");

JavaScript.Append(
"GetTopFile().disabled = false;\n");

JavaScript.Append(
"BtnAdd.disabled = false;\n");

JavaScript.Append(
"}\n");

JavaScript.Append(
"}\n");

JavaScript.Append(
"Item.appendChild(A);\n");


// *** List item on mouse over function ***


//JavaScript.Append("Item.onmouseover = function()\n");


//JavaScript.Append("{\n");


//JavaScript.Append("Item.bgColor = Item.style.backgroundColor;\n");


//JavaScript.Append("Item.fColor = Item.style.color;\n");


//JavaScript.Append("Item.style.backgroundColor = '#C6790B';\n");


//JavaScript.Append("Item.style.color = '#ffffff';\n");


//JavaScript.Append("Item.style.fontWeight = 'bold';\n");


//JavaScript.Append("}\n");


// *** List item on mouse out function ***


//JavaScript.Append("Item.onmouseout = function()\n");


//JavaScript.Append("{\n");


//JavaScript.Append("Item.style.backgroundColor = Item.bgColor;\n");


//JavaScript.Append("Item.style.color = Item.fColor;\n");


//JavaScript.Append("Item.style.fontWeight = 'normal';\n");


//JavaScript.Append("}\n");

JavaScript.Append(
"return Item;\n");

JavaScript.Append(
"}\n");

           



 

And here are the css classes

linkdiv



{


color:Blue;


display:inline;


text-decoration:underline;

}


linkdiv:hover



{


color:Blue;


display:inline;


text-decoration:underline;

}


div.linkdiv

{


color:Blue;


display:inline;


text-decoration:underline;

}


div.linkdiv:hover



{


color:Blue;


display:inline;


text-decoration:underline;


cursor:pointer;

}


div.fileitem

{


display:block;



}


div.fileitem:hover



{


display:block;


background-color:#AEAEFF;

}