In this week, I have spent lot of time with finding ways to
upload attachment with list item in SharePoint 2010. Everyone knows we can achieve
this very easily using Server side code. However as my blog title suggests my
requirement was to accomplish this task without any server side code.
So here are steps to do this using html5 and Jquery
SPService library:
1.
Create a list “Test” in your SP2010 Team site.
2.
Create a Column’s like Title, Description
(Single line of text) etc.
3.
Add a tag
for Html 5 in your site master page. (v4.master).
4.
Add Meta tag in same master page .This tag tells
IE browsers to display your webpage in IE 10 mode.
5.
Create a (.aspx) page using SPD in Site Pages
library.
6.
Create a html for your custom form and file
upload control page will look like as below :
Source Code for html:
Input type “File” is html5 control, it has attribute for setting multiple files selection.Also I have used output control for displaying list of files.
7. Add a reference to Jquery library and SPServices Jquery library JavaScript files. 
8. Below is source code for event capture for displaying uploaded files in my web page
This
code adds event receiver for file upload control and displays selected file
names in output list.
9.
On Submit button click I am using Client object
model (COM) for saving item in List.
After
that I have used FileReader for reading uploaded files .Using SPService method
I am pushing files as attachment to list item just created.
FileReader
is basically asynchronous object, therefore we can use on load event .Also I
have used readAsDataURL
method, which is best API to read file which gives URL at the end of reading file.
That’s
it your list item with multiple or single attachments will be saved
successfully.
