My question is simple:
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
// I assign picFile.result to an <img>'s src attribute
<img class='thumbnail' src='" + picFile.result + "'/>";
}
//Read the image
picReader.readAsDataURL(file);
Later when I do not have access to actual FileReader and have access to only <img> in jquery, how can I send this image(img.src) as data to server. Server code is in ASP.NET MVC and is expacting a HttpPostedFileBase object in controller.
If I use 'img.src' as data in $.ajax, it DOES NOT send file as Request.File, It appends data in request param.
Background
I am trying to build a multiple image upload feature with preview in a div. User can click a button to remove any selected image from div, but that image file cannot be removed from Files list(<input type=file>) as Files object is readonly. So to get final list of images I have to depend upon the <img> tag inside the preview div. User might have selected 5 images initially, which means
event.target.files; //FileList object contains 5 file objects
But after seeing preview he only wants to upload 3 of them.
