Image Preview Within Selected Division Using JQuery

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.

Step 5

Within the <script> use file upload “change” event for file upload control like.
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,