user3501613 user3501613 - 1 year ago 114
ASP.NET (C#) Question

Upload Image from client side using only jquery and Web Service in ASP

In my application i want to upload some images from client side.I want to do that without any handler. I want to browse the image from client side(local drive) using jquery and want to pass that image to one web service(from jquery itself) and save that image using that service only without using any other handler.

I tried different posts similar to this but none of them satisfying my needs.

I am new to .net and jquery, so whether it is possible, I tried to get the path of the uploaded image but then I understood due to security browser will not gave the actual path from client side.

So whether there is any other way to do this.........

Answer Source

I have worked with images from AngularJS rise to asp, and the best way and I run fast for me was to get the code base64 and the webservice transform the image and save it to a specific route.

public string UploadImageUser(string foto) {
    if (foto != "") {
        var regex = new Regex(@ "data:(?<mime>[\w/\-\.]+);(?<encoding>\w+),(?<data>.*)", RegexOptions.Compiled);
        var match = regex.Match(foto);

        var mime = match.Groups["mime"].Value;
        var encoding = match.Groups["encoding"].Value;
        var data = match.Groups["data"].Value;
        try {
            string path = "C://";
            Byte[] bytes = Convert.FromBase64String(data);
            File.WriteAllBytes(path + "example.jpg", bytes);
        } catch (Exception e) {

To find out how to get the base64 code image that the user can select, you can take this solution Solution

The ajax code is simple, depending on how you work your WebService,

    type: "post",
    url: "http://localhost:8080/myws/UploadImageUser.aspx" ,
    data: foto,
    success: function (response) {
    error: function(){

I tried with base64 and i am adding the code here

   var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[0];
        var fileReader = new FileReader();
        fileReader.onload = function (fileLoadedEvent) {
            var srcData =; // <--- data: base64
            var base64 = srcData;
            //jpeg or png
            base64 = base64.replace('data:image/jpeg;base64,', '');
                type: "POST",
                //url: AQ.AMT.Url + "/Home/StoreImage",
                url: "DempService.asmx/StoreImage",
                //async: false,
                data: "{'base64':'" + base64 + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Data) {
                error: function (e) {


in service

    public bool StoreImage(string base64)
        //ExportPptString obj = new ExportPptString();
        string downloadToken = Guid.NewGuid().ToString();
        //extension we have to pass
        string filepath = Server.MapPath("~/Download/" + downloadToken + ".jpeg");
            using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64)))
                using (System.Drawing.Bitmap bm2 = new System.Drawing.Bitmap(ms))


        catch (Exception ex)


        return true;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download