Preview an image before it is uploaded

- 

<script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
and the associated HTML:
<body>
    <form id="form1" runat="server">
        <input type='file' onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>
source:http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded
update: this works only in firefox and chrome
Here is another sample which works in IE but not in IE10+
source: 
http://forums.asp.net/t/1320559.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        #newPreview
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
    </style>


    <script language="javascript" type="text/javascript">
    function PreviewImg(imgFile)
    {
        var newPreview = document.getElementById("newPreview");
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
        newPreview.style.width = "80px";
        newPreview.style.height = "60px";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        preview
        <asp:FileUpload ID="Fud_Pic" runat="server" onchange="PreviewImg(this)" />
        <div id="newPreview">
        </div>
    </div>
    </form>
</body>
</html> 


 As a whole you can combine the two code to work on IE,firefox and Chrome 


#newPreview
{
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}


<script type="text/javascript">
   function readURL(input) {
         if(window.FileReader)


         {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }


   }


   else


    {


       var newPreview = document.getElementById("newPreview");
       newPreview.filters.item("DXImageTransform.Microsoft.AlphaImag                eLoader").src = input.value;
       newPreview.style.width = "200px";
       newPreview.style.height = "200px";


}
    </script>




<body>
    <form id="form1" runat="server">
        <input type='file' onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />


        <div id="newPreview"> </div>


   

</form>


</body>






Note: Still it won't work in safari. I am working on that. Keep you posted...
The live preview is shown using the DXImageTransform filter CSS property in browsers that do not support HTML5 i.e. Internet Explorer 8 and 9.
While for the browsers that support HTML5 i.e. Internet Explorer 10 and 11+, Mozilla FireFox, Google Chrome and Opera, the image preview is displayed using HTML5 FileReader API.
HTML Markup
The HTML Markup consists of an HTML FileUpload control and a DIV which will be used for displaying live preview.
<input id="fileupload" type="file" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>
Client Side Implementation for displaying live preview of image before upload
Firstly we need to check whether the file is a valid image file.
Then we need to determine the browser and its version as based on that we need to select the appropriate way to display the image preview before upload.
Case1: Browsers not supporting HTML5 i.e. Internet Explorer 8 and 9
For browsers that do not support HTML5 and support DXImageTransform filter CSS, the DXImageTransform filter is applied to the DIV and the path of the file is set from the FileUpload control.
Case2: Browsers supporting HTML5 i.e. Internet Explorer 10 and 11+, FireFox, Chrome and Opera
For browsers that support HTML5 and also the HTML5 FileReader API, the File selected in the FileUpload control is read as BASE64 string using the readAsDataURLmethod and is displayed using an Image control.
Note: Though Apple Safari supports HTML5 it does not support HTML5 FileReader API and hence in such case there’s no possible way to display Image Preview before upload in Apple Safari.
<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 () {
        $("#dvPreview").html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test($(this).val().toLowerCase())) {
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                $("#dvPreview").show();
                $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
            }
            else {
                if (typeof (FileReader) != "undefined") {
                    $("#dvPreview").show();
                    $("#dvPreview").append("<img />");
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#dvPreview img").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            }
        } else {
            alert("Please upload a valid image file.");
        }
    });
});
</script>
CSS styles
<style type="text/css">
#dvPreview
{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    min-height: 400px;
    min-width: 400px;
    display: none;
}
</style>
 


 


 

Comments

Post a Comment

Popular posts from this blog

c# console applicaton progress bar with spinner

-
Image
Name spaces to include: using System; using System.Text; using System.Threading; ---------------------------------------------- Progress bar class:     class progressBar     {         /// <summary>         /// An ASCII progress bar         /// </summary>         public class ProgressBar : IDisposable, IProgress<double>         {             private const int blockCount = 40;             private readonly TimeSpan animationInterval = TimeSpan.FromSeconds(1.0 / 8);            private const string animation = @"▀▀▀▀▄▄▄▄";//@"▀▀▀▀▄▄▄▄"  @"|/-\";        ...
Read more

Paging, sorting and searching in mvc + razor

-
Image
Source: http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application The following illustration shows what the page will look like when you're done. The column headings are links that the user can click to sort by that column. Clicking a column heading repeatedly toggles between ascending and descending sort order. Add Column Sort Links to the Students Index Page To add sorting to the Student Index page, you'll change the   Index   method of the   Student   controller and add code to the   Student   Index view. Add Sorting Functionality to the Index Method In   Controllers\StudentController.cs , replace the   Index   method with the following code: public ActionResult Index ( string sortOrder ) { ViewBag . NameSortParm = String . IsNullOrEmpty ( sortOrder ) ? "Name_desc" : "" ; ViewBag . DateSortParm = sortOrder == "D...
Read more

C# SELF DESTRUCT CONSOLE APP

-
Just call this method at the very end of your C# application to delete application’s executable file. /// <summary> /// This method deletes the exe that calls it. /// /// This method must be called right at the end of the application. /// </summary> private static void SelfDestroy() {      var startInfo = new ProcessStartInfo();      startInfo.FileName = "cmd.exe" ;      startInfo.RedirectStandardInput = true ;      startInfo.UseShellExecute = false ;        var process = new Process();      process.StartInfo = startInfo;      process.Start();        // The delay is just making sure the exe to delete is done      // running.      var delayPings = 2;      var exeName = AppDomain.CurrentDomain.Friend...
Read more