Tuesday, May 26, 2015

Uploading Image to Server using jquery c#

    $("#avatarUpload").on('change', function () {

        previewFile();
    });

    var imgBase64;
    function previewFile(evt) {
        // var preview = document.querySelector('#<%=Avatar.ClientID %>');
       // var files = evt.target.file;
        var preview = document.getElementById('avatarImg');
        //$('#avatarImg');
      //  var file = document.querySelector('#avatarUpload').files[0];
        var input = document.getElementById('avatarUpload');
        var dv = document.getElementById('showImg');
        var file = input.files[0];
        console.log(file);
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
            dv.value = reader.result;
            imgBase64 = reader.result;
            imgBase64 = imgBase64.replace('data:image/png;base64,', '');
            imgBase64 = imgBase64.replace('data:image/gif;base64,', '');
           // console.log(btoa(reader.result))
        }

        if (file) {
           // alert('file found');
             reader.readAsDataURL(file);
           // reader.readAsArrayBuffer(file)

           // reader.readAsBinaryString(file);
        } else {
            preview.src = "";
        }
    }



       // var image = document.getElementById("avatarImg").toDataURL("image/png");
     var   image = imgBase64.replace('data:image/jpeg;base64,', '');

        $.ajax({
            type: "POST",
            url: base + "TPWL/InsertImage",
            dataType: "JSON",
            data: JSON.stringify({ "obj": image }),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                console.log(data);
                if (data.ResultID != '-1') {
                    $("#spInfo").html('<strong style="color:green">' + data.Message + '</strong>');
                    $("#tblDetails tr:gt(0)").remove();
                    if (data.obj != null) {
                        AppenHeadData(data.obj.OrderHead);
                        AppendDetailsTable(data.obj.OrderDetailsDetails)
                    }
                }
                else {
                    $("#spInfo").html('<strong style="color:red">' + data.Message + '</strong>');
                }


            },
            error: function (a, b, c) {
                alert(a + '..' + c.statusCode);
                // alert(a.statusText);
            }

        });


    });


<div style=" text-align:center;">
    <input id="avatarUpload" type="file" name="files[]" accept="image/*" />
    <img width="60" height="60" src="123.jpg" id="avatarImg" />

    <input type="button"  value="Image Upload" id="tbnImgUpload"/>

    <textarea id="showImg"></textarea>
</div>