#View Page (Index.cshtml)
@model MVCTutorial.Models.ModelC @{ ViewBag.Title = "Index"; // Layout = null; } <div class="panel panel-body" style="min-height:256px"> <div class="col-md-9"> <div class="col-md-4"> <div class="btn btn-primary"> <input type="file" id="imageBrowes" /> </div> <hr /> <div id="imgPreview" class="thumbnail" style="display:none"> <img class="img-responsive" id="targetImg" /> <div class="caption"> <a href="#" onclick="ClearPreview()"><i class="glyphicon glyphicon-trash"></i></a> <span id="description"></span> </div> </div> </div> </div> </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script> $(document).ready(function () { $("#imageBrowes").change(function () { var File = this.files; if (File && File[0]) { ReadImage(File[0]); } }) }) var ReadImage = function (file) { var reader = new FileReader; var image = new Image; reader.readAsDataURL(file); reader.onload = function (_file) { image.src = _file.target.result; image.onload = function () { var height = this.height; var width = this.width; var type = file.type; var size = ~~(file.size / 1024) + "KB"; $("#targetImg").attr('src', _file.target.result); $("#description").text("Size:" + size + ", " + height + "X " + width + ", " + type + ""); $("#imgPreview").show(); } } } var ClearPreview = function () { $("#imageBrowes").val(''); $("#description").text(''); $("#imgPreview").hide(); } </script>
All Code Factory
- Part 11- Insert data into database
- Part 12- Server side and clientside validation
- Part 13- Insert data into multiple tables
- Part 14- Insert data into database using JQuery
- Part 15- How to create Bootstrap Popup
- Part 16- Delete operation in Asp.net MVC
- Part 17- What is Partial View in Asp.net MVC
- Part 18- How to call Partial View using JQuery
- Part 19- Difference between Html.Partial() and Html.RenderPartial()
- Part 20- AddEdit Record using Partial View
- Part 21- Layout View in Asp.net MVC
- Part 22- Style.Render and Script.Render
- Part 23 - RenderBody, RenderSection and RenderPage.
- Part 24- Divide Page into several component using Bootstrap
- Part 25- Refresh Entity framework after any modification in database table
- Part 26- Set foreign key relationnship in database tables
- Part 27- Create Rgistration Page
- Part 28- Create Login Page
- Part 29- Client Side Validation using JQuery
- Part 30- How to return multiple Model to a View (Interview)
- Part 31- How to create Dynamic Menu using Partial View
- Part 32- Preview Image Before Uploading
- Part 33- Upload and Display Image using JQuery
- Part 34-Upload Image to SQL Server and Display
- Part 35- Download Image from URL and Upload to SQL Server
- Part 36- Cascading DropdownList
- Part 37- Implement Search Functionality
- Part 38- Attribute Routing in MVC
- Part 39- How to display multiple checkbox checked data
- Part 40- How to send multiple checkbox checked value to Server
- Part 41- How to create responsive sortable Image Gallery
- Part 42 - How to implement JQuery Autocomplete Textbox
- Part 43 - How to send Emails in Asp.net MVC
- Part 44 - Integrate JQuery DataTables plugin
- Part 45 - Display record from database using JQuery Datatable
- Part 46- Add Edit Record using JQuery DataTable
- Part 47 - JQuery DataTables Server -side Processing
- Part 48 - JQuery server side processing -Search functionality
- Part 49 - Pagination using Skip and Take method
- Part 50 - Refresh DataTable After Performing Any Action
- Part 51 - Send OTP ( One Time Password ) to any mobile device
- Part 52 - How to use AutoMapper in Asp.net MVC
- Part 53 - How to use AutoMapper ForMember Method
- Part 54 - Repository Pattern - 1 - Adding Business Layer
- Part 55 - Repository Pattern - 2 - Adding Domain Layer
- Part 56 - Repository Pattern - 3 - Dependency Injection
- Part 57- Repository Pattern- 4 - Adding Data Access Layer
- Part 58 - Repository Pattern - 5 - Setting Up Generic Repository
- Part 59 - Display Record using repository pattern
- Part 60 - Add Edit Record using Repository Pattern