Click here to Skip to main content
15,917,005 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I am using the code in this link below.
I am trying to save the uploaded images to a database after user complete his changes (deleting, replacing adding pictures).[^]

I tried with this code below but it is not reflecting any changes by the user for example if the user select 3 pictures preview them and delete one of them and the submit to server (code behind not the one this code is using) then in the code behind if you check the HttpFileCollection fileCollection = Request.Files; it will have all 3 pictures.
But the array in the JavaScript named thumbsArray have the exact number remaining 2 pictures.
I could not access that array from code behind with a hiddenfield, I do not know what I am missing.
Please I need your help

string folderName;
      protected void Page_Load(object sender, EventArgs e)
          ddlLocation.Items.Insert(0, new ListItem("--Select a location--", "-1"));
          folderName = Path.Combine(Server.MapPath("~/test/"), "Top-Level Folder");
          Response.Write("this it the hidden field value page load"+HiddenField1.Value);

      protected void Button1_Click(object sender, EventArgs e)
          HttpFileCollection fileCollection = Request.Files;
          for (int i = 0; i < fileCollection.Count; i++)
              HttpPostedFile postedFile = fileCollection[i];
              if (postedFile.ContentLength > 0)
                  string filePath = Path.Combine(folderName, Path.GetFileName(postedFile.FileName));
                 // Response.Write(filePath);

          Response.Write("this it the hidden field value button click" + HiddenField1.Value);

ZurdoDev 19-Jan-15 20:56pm    
You should also post the javascript.
websource 21-Jan-15 18:52pm    
Here is the JavaScript. To see the whole picture of what I mean you should look at the link above:[^]

var $fileUpload = $("#files"),
$list = $('#list'),
thumbsArray = [],
maxUpload = 5;

function read( f ) {
return function( e ) {
var base64 =;
var $img = $('<img/>', {
src: base64,
title: encodeURIComponent(, //( escape() is deprecated! )
"class": "thumb"
var $thumbParent = $("<span/>",{html:$img, "class":"thumbParent"}).append('<span class="remove_thumb"/>');
thumbsArray.push(base64); // Push base64 image into array or whatever.
$list.append( $thumbParent );

function handleFileSelect( e ) {
e.preventDefault(); // Needed?
var files =;
var len = files.length;
if(len>maxUpload || thumbsArray.length >= maxUpload){
return alert("Sorry you can upload only 5 images");
for (var i=0; i<len; i++)="" {=""
="" var="" f="files[i];
" if="" (!f.type.match('image.*'))="" continue;="" only="" images="" allowed="" reader="new" filereader();
="" reader.="">";

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900