How to show image before upload to table store?

This code show the image before upload to table store.The code samples and API available at www.aspsnippets.com are available absolutely free. You are free to use it for commercial as well as non-commercial use at your own risk, but you cannot use it for posting on blogs or other tutorial websites similar to www.aspsnippets.com without giving reference link to the original article.

All the code samples and API provided by the authors are solely their creation and neither the author nor the site are responsible if it does not work as intended.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("#dvPreview");
dvPreview.html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("style", "height:100px;width: 100px");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
dvPreview.html("");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
});
</script>
</head>
<body>
<div>
<input id="fileupload" type="file" multiple="multiple" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>
</div>
</body>
</html>

This is the best website I have ever seen in my life.Every day we learn something new and better. You are really god gifted.Nothing to say Hats Off to you Mudassar.

You are doing really great job done.

Multiple Image Preview before uploading in Jquery:

We have done with preview image before upload, so let go one step further. Now we are going to show you how to select multiple images and preview it before upload .i.e before the image is actually uploaded to the server using jQuery in Asp.net.

For uploading multiple images, we need to add multiple attributes to our file input tag.

# HTML Markup:

<br />

</div>

# jQuery:

Now we store the file length in a variable and make a For loop over it, to access all the images. Finally, our code for multiple image preview before upload looks like as shown below.

$("#fileUpload").on('change', function () {

//Get count of selected files

var countFiles = $(this)[0].files.length;

var imgPath = $(this)[0].value;

var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();

var image_holder = $("#image-holder");

image_holder.empty();

if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {

if (typeof (FileReader) != "undefined") {

//loop for each file selected for uploaded.

for (var i = 0; i < countFiles; i++) {

var reader = new FileReader();