Preview image before actual upload

3.88 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

8 votes, 3.88 avg. rating (78% score)

Introduction

In this post we will see simple and better way to preview image of file upload control. This is common way which can be used for both SharePoint and ASP.NET
What are the points that are covered

How to Preview image of file upload control before actual upload
How to Clear image preview

Preview image and Clear image of file upload control

Following is the complete code which has file upload control with onchange event. Whenever user selects image from the local computer, a preview of the image will be appear.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
     .imgPreview {
        border: 8px solid #ccc;
        width: 150px;
        height: 100px;
    }
    </style>
    <script type="text/javascript">
        function PreviewImage(uploadObj) {
		try
		{
			 var previewImg = document.getElementById("imgPreview");
			 previewImg.src = uploadObj.value;	
			 previewImg.style.display = "inline";
		}
		catch (exception) {
                alert(exception);
            }
           
            
        }

function RemovePreview() {
            //clear image
            var previewImg = document.getElementById('<%= imgEvent.ClientID %>');
            previewImg.src = "";

            //clear value of fileupload control
            var fldUploadCtrl = document.getElementById('<%= fldEventImage.ClientID %>');
            fldUploadCtrl.select();
            fldTextRange = fldUploadCtrl.createTextRange();
            fldTextRange.execCommand('delete');
            fldUploadCtrl.focus();
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
   
    <asp:FileUpload ID="fldUpload"  onchange="javascript:PreviewImage(this);"  runat="server" /></br>
	<img id="imgPreview" style="display:none" class="imgPreview" alt="Image Preview" src=""  />
    <br />
  <asp:Button   OnClientClick="return RemovePreview()"   ID="btnRemove" runat="server" Text="Remove"></asp:Button>
    </form>
    
   
</body>
</html>

Conclusion

Some times most of the developers will stuck for simple things. Hope you understood how to show image preview and clear value of fileupload control in javascript.

Remarks

We may some times see the fileupload control value as “c:\fakepath\” in javascript.
Implement any of the following options to resolve
1) page having fileupload control should be added to the trusted sites collection of the browser
or
2) Go to InternetOptions>security>
> select Internet
> click CustomLevel
> under settings “Enable” include local directory path when uploading files to server

Email this page