How to save image into the path using jquery?

Question

Hello,

I am using this code, for Image Upload without using FileUpload my image is uploading in to the image box but did not save in to the path or folder, please help me how to save image in to the folder. My code is here:-
 // FILEUPLOAD PUBLIC CLASS DEFINITION
// =================================


var Fileupload = function (element, options) {
this.$element = $(element)


this.$input = this.$element.find(':file')
if (this.$input.length === 0) return


this.name = this.$input.attr('name') || options.name


this.$hidden = this.$element.find('input[type=hidden][name="' + this.name + '"]')
if (this.$hidden.length === 0) {
this.$hidden = $('<input type="hidden" />')
this.$element.prepend(this.$hidden)
}


this.$preview = this.$element.find('.fileinput-preview')
var height = this.$preview.css('height')
if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)


this.original = {
exists: this.$element.hasClass('fileinput-exists'),
preview: this.$preview.html(),
hiddenVal: this.$hidden.val()
}


this.listen()
}


Fileupload.prototype.listen = function () {
this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
$(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))


this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
},


Fileupload.prototype.change = function (e) {
if (e.target.files === undefined) e.target.files = e.target && e.target.value ? [{ name: e.target.value.replace(/^.+\\/, '')}] : []
if (e.target.files.length === 0) return


this.$hidden.val('')
this.$hidden.attr('name', '')
this.$input.attr('name', this.name)


var file = e.target.files[0]


if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
var reader = new FileReader()

var preview = this.$preview
var element = this.$element


reader.onload = function (re) {
var $img = $('<img>').attr('src', re.target.result)
e.target.files[0].result = re.target.result


element.find('.fileinput-filename').text(file.name)


// if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10) - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))


preview.html($img)
element.addClass('fileinput-exists').removeClass('fileinput-new')


element.trigger('change.bs.fileinput', e.target.files)
$('#HFLogoPath').val(file.name);

}


reader.readAsDataURL(file)



} else {
this.$element.find('.fileinput-filename').text(file.name)
this.$preview.text(file.name)


this.$element.addClass('fileinput-exists').removeClass('fileinput-new')


this.$element.trigger('change.bs.fileinput')
}
},


Fileupload.prototype.clear = function (e) {
if (e) e.preventDefault()


this.$hidden.val('')
this.$hidden.attr('name', this.name)
this.$input.attr('name', '')


//ie8+ doesn't support changing the value of input with type=file so clone instead
if (isIE) {
var inputClone = this.$input.clone(true);
this.$input.after(inputClone);
this.$input.remove();
this.$input = inputClone;
} else {
this.$input.val('')
}


this.$preview.html('')
this.$element.find('.fileinput-filename').text('')
this.$element.addClass('fileinput-new').removeClass('fileinput-exists')


if (e !== false) {
this.$input.trigger('change')
this.$element.trigger('clear.bs.fileinput')
}
},


Fileupload.prototype.reset = function () {
this.clear(false)


this.$hidden.val(this.original.hiddenVal)
this.$preview.html(this.original.preview)
this.$element.find('.fileinput-filename').text('')


if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')


this.$element.trigger('reset.bs.fileinput')
},


Fileupload.prototype.trigger = function (e) {
this.$input.trigger('click')
e.preventDefault()
}


This is the HTML Code for this Jquery:-

<div class="frant-page-header"> 

   <div class="frant-page-header-logo"><div class="frant-page-header-logo"><div class="fileinput fileinput-new" data-provides="fileinput" style="cursor:pointer;"><input type="hidden" title="Add Logo">

        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 134px; height: 100px; line-height: 100px;">

            <asp:Image ID="ImageLogo" runat="server" ImageUrl="~/images/64.png" /><%--<img src="images/64.png">--%></div>

            

        <div>

          <span class="btn btn-default btn-file" style="border:none;"><input type="file" title="Add Logo"></span>

        </div></div></div></div>

       <div class="frant-page-header-welcome-text">Welcome!</div>

       <div class="frant-page-text"><asp:Label ID="LblCardBalance" runat="server" Text="0"></asp:Label></div></div>

 Please help me.

Thanks in Advance.

Ankit Agarwal
Website Develope