Image Preview Within Selected Division Using JQuery

Naresh Yadav
8y
2.7k
0
2

Blog

WebSite3.zip

Step 1

Add new website.

Step 2

Add new WebForm to the website.

Step 3

Add JQuery Script File to the Project.

Step 4

With in the <body> use <input> tag for file control and <div> section to display preview image.

<body>
<form id="form1" runat="server">
<div>
<input type="file" id="preview" accept="image/png,image/jpeg,image/gif" />
<br/>
<br/>
<div id="dvPreview">
<imgid="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
</div>
</div>
</form>
</body>

Step 5

Within the <script> use file upload “change” event for file upload control like.

$("#preview").change(function () {}

Step 6

Check whether the file is defined,

Define a regular expression for imagetype.
1. var regex= /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
Condition to check the file: if (typeof (FileReader) != "undefined") {}
If the image is in valid format the following code can be followed to preview an image within the selected
1. <div> section.
3. $($(this)[0].files).each(function () {
4. var file = $(this);
5. if (regex.test(file[0].name.toLowerCase())) {
6. var reader = newFileReader();
7. reader.onload = function (e) {
8. varimg = $("<img />");
9. img.attr("style", "height:110px;width: 110px; border: 1px solid #ddd;border-radius: 4px;padding: 5px;");
10. img.attr("src", e.target.result);
11. dvPreview.append(img);
12. }
13. reader.readAsDataURL(file[0]);
14. }
15. else {
16. alert("Invalid format.");
17. }
18. }
19. });

Here in the above code style attributes are also defined for image.

Before selecting the Image.

After selecting the Image.

Here is the total code,

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ImageUpload.aspx.cs"Inherits="ImageUpload"%>
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<headr unat="server">
<title>Image Preview</title>
<script src="Scripts/jquery-3.0.0.min.js">
</script>
<script type="text/javascript">
$(document)
.ready(function()
{
$("#preview")
.change(function()
{
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (typeof(FileReader) != "undefined")
{
vardvPreview = $("#dvPreview");
dvPreview.html("");
$($(this)[0].files)
.each(function()
{
var file = $(this);
if (regex.test(file[0].name.toLowerCase()))
{
var reader = newFileReader();
reader.onload = function(e)
{
varimg = $("<img />");
img.attr("style", "height:110px;width: 110px; border: 1px solid #ddd;border-radius: 4px;padding: 5px;");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
}
else
{
alert("Invalid format.");
}
});
}
else
{
alert("This browser does not support HTML5 FileReader.");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" id="preview" accept="image/png,image/jpeg,image/gif" />
<br/>
<br/>
<div id="dvPreview">
<img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
</div>
</div>
</form>
</body>
</html>

Up Next

Select one checkbox at a time inside a Gridview using JQUERY

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all