Preview image before actual upload
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
September 21, 2012
В·
Adi В·
No Comments
Tags: clear fileupload value, fileupload preview, Preview image В· Posted in: Sharepoint 2007, Sharepoint 2010
Leave a Reply