How to upload image file into the SharePoint 2010 picture library using javascript

Question

I need to upload image file into the sharepoint 2010 picture library using java script...

requirement is --

1. we have File Upload control

2. And, we have to upload image file from that file upload control

Please can you see my code...But this code doesnt work.

If anybody has a better solution that would be nice.

Thanks in advance.

<script>

function updateListItem() 
{
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Test');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', My Image);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded() 
{

alert('Item updated!');

}

function onQueryFailed(sender, args) 
{

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

} 

</script>

<input id="FileUpload" type="File" /><br />
<br />
<input onclick="updateListItem()" id="UploadImage" type="submit" value="Upload" />

Answer 1

Uploading files in general is not easy in JavaScript as far as I know.
You could use the FileReader API with a polyfill, Jahdrien/FileReader.
Or you could attach an ajax uploader such as valums/ajax-upload to the existing picture gallery upload form (/_layouts/Upload.aspx?IsDlg=1&List=).