ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Save binary image in Database using ASMX WebService and jQuery Ajax in ASP.Net<p>Hi <a class="username" rel="akshay806">akshay806</a>,</p> <p>I have created a sample which full fill your requirement you need to modify the code according to your need.</p> <p>I have taken reference from below articles and links to achieve the task.</p> <ol style="list-style-type: undefined;"> <li class="header"><a title="Select Insert Edit Update and Delete in GridView using Entity Framework in ASP.Net'a" href="https://www.aspsnippets.com/Articles/Select-Insert-Edit-Update-and-Delete-in-GridView-using-Entity-Framework-in-ASPNet.aspx" target="_blank">Select Insert Edit Update and Delete in GridView using Entity Framework in ASP.Net</a></li> <li class="header"><a title="Call (Consume) Web Service (ASMX) using jQuery AJAX in ASP.Net'a" href="https://www.aspsnippets.com/Articles/Call-Consume-Web-Service-ASMX-using-jQuery-AJAX-in-ASPNet.aspx" target="_blank">Call (Consume) Web Service (ASMX) using jQuery AJAX in ASP.Net</a></li> <li class="header"><a class="title f16" href="http://www.aspforums.net/Threads/572372/Save-binary-data-in-Database-and-retrieve-and-display-in-image-control-using-jQuery-Ajax-in-ASPNet/" target="_blank">Save binary data in Database and retrieve and display in image control using jQuery Ajax in ASP.Net</a></li> </ol> <p>Refer below sample code and modify it according to your need.</p> <p><strong><span style="text-decoration: underline;">SQL</span></strong></p> <pre class="brush: sql">CREATE TABLE [dbo].[tblFiles]( [Id] [int] IDENTITY(1,1) NOT NULL, [Name] [varchar](50) NULL, [ContentType] [varchar](50) NULL, [Data] [varbinary](max) NULL, CONSTRAINT [PK_tblFiles] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]</pre> <p><strong><span style="text-decoration: underline;">Web Service(ASMX)</span></strong></p> <p><strong><span style="text-decoration: underline;">ImageSaveWebServic.cs </span></strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using ImagesModel; /// &lt;summary&gt; /// Summary description for ImageSaveWebService /// &lt;/summary&gt; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class ImageSaveWebService : System.Web.Services.WebService { [WebMethod] public string SaveImage(FileData data) { using (ImagesEntities imageFile = new ImagesEntities()) { tblFile imageData = new tblFile { Name = data.Name, ContentType = data.ContentType, Data = Convert.FromBase64String(data.Data) }; imageFile.AddTotblFiles(imageData); imageFile.SaveChanges(); return &#34;Data Saved Successfully&#34;; } } public class FileData { public string Data { get; set; } public string ContentType { get; set; } public string Name { get; set; } } }</pre> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;div&gt; &lt;table border=&#34;0&#34; cellpadding=&#34;0&#34; cellspacing=&#34;0&#34;&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload ID=&#34;FileUpload1&#34; runat=&#34;server&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan=&#34;2&#34;&gt; &lt;asp:Button ID=&#34;btnSave&#34; Text=&#34;Save&#34; runat=&#34;server&#34; CssClass=&#34;btn btn-primary&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { var reader = new FileReader(); var fileName; var contentType; $(&#39;[id*=FileUpload1]&#39;).change(function () { if (typeof (FileReader) != &#34;undefined&#34;) { var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; $($(this)[0].files).each(function () { var file = $(this); if (regex.test(file[0].name.toLowerCase())) { fileName = file[0].name; contentType = file[0].type; reader.readAsDataURL(file[0]); } else { alert(file[0].name + &#34; is not a valid image file.&#34;); return false; } }); } else { alert(&#34;This browser does not support HTML5 FileReader.&#34;); } }); $(&#34;[id*=btnSave]&#34;).click(function () { var byteData = reader.result; byteData = byteData.split(&#39;;&#39;)[1].replace(&#34;base64,&#34;, &#34;&#34;); var obj = {}; obj.Data = byteData; obj.Name = fileName; obj.ContentType = contentType; $.ajax({ type: &#34;POST&#34;, url: &#34;ImageSaveWebService.asmx/SaveImage&#34;, data: &#39;{data : &#39; + JSON.stringify(obj) + &#39; }&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (r) { alert(r.d); }, error: function (r) { alert(r.responseText); }, failure: function (r) { alert(r.responseText); } }); return false; }); }); &lt;/script&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">ScreenShot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/XKR7cg8.gif" alt="" width="317" height="359" /></span></strong></p>https://www.aspforums.net:443/Threads/577942/Save-binary-image-in-Database-using-ASMX-WebService-and-jQuery-Ajax-in-ASPNet/https://www.aspforums.net:443/Threads/577942/Save-binary-image-in-Database-using-ASMX-WebService-and-jQuery-Ajax-in-ASPNet/Tue, 26 Sep 2017 05:55:29 GMT