HTML5 comes with lot of new APIs, one of the my favorite is File Reader. The File Reader API helps to read and manipulate contents of the files. Here is the code snippet, which helps to select multiple image files using file browser control and upload to server using JQuery.
This code enumerate all the files from INPUT file control, verify it is an IMAGE. Then read the contents as readAsDataURL(), and in the onload callback, creates a preview and upload to server using JQuery.
Here is the ASP.Net MVC action.
file.Replace(“data:image/png;base64,”, “”) required to remove the data type details, otherwise Convert.FromBase64String() method will fail. And if you are using any other file type, like JPEG, you need to write code remove that also.
Here is the screen shot of the web page running on my system on IE11.
You can use Web API or ASP.Net handlers to handle the upload requests.
What do you think? I would like to hear your thoughts, suggestions, and questions in the comments section below.