Adding Images to div from codebehind in Asp.Net - asp.net

Question

I am uploading some images using plupload and adding those images to div container.And after performing some options I need to upload the edited Images again to the same div from codebehind.
Is that possible to do so?If so how can I modify my code:
This is how I'm trying to upload Images and adding them to div(thumbs):
<script type="text/javascript">
$(function () {
$("#<%=uploader.ClientId%>").plupload({
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Editor.aspx',
max_file_size: '10mb',
max_file_count: 21,
chunk_size: '1mb',
unique_names: true,
rename: true,
dragdrop:true,
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
flash_swf_url: 'js/plupload.flash.swf',
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
$('form').submit(function (e) {
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
if (uploader.files.length > 0) {
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
//alert('You must at least upload one file.');
return false;
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FilesAdded', function (up, files) {
var i = up.files.length,
maxCountError = false;
plupload.each(files, function (file) {
setTimeout(function () {
up.start();
}, 100);
if (uploader.settings.max_file_count && i >= uploader.settings.max_file_count) {
$.msgBox({
title: "Info",
content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",
type: "info",
showButtons: true,
opacity: 0.1,
autoClose: false
});
uploader.removeFile(up.files[i - 1]);
} else {
}
});
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "><a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' rel='group1'><img class='clickImage' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
showStickySuccessToast();
}
});
});
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
</script>
After editing operation which I am doing it in my codebehind I have saved all those Images to one folder where users can save them.So Now What I want to do Is add all those existed Images on my server folder to be displayed it in the same div(thumbs)where I am adding Images using the uploader at the beginning.

Answer 1

To access a control in code behind, the control must have runat="server". However, it is simpler to use a Panel control instead of a div. A Panel control renders as a div so any client JavaScript will continue to work.
Image NewImage = new Image();
NewImage.ImageUrl= MapPath(#"~\Images\april.jpg");
Panel1.Controls.Add(NewImage);