如何使用jquery将图像保存到路径中？ [英] How to save image into the path using jquery?

问题描述

您好，



我正在使用此代码，对于图像上传而不使用FileUpload我的图像正在上传到图像框但没有保存到路径或文件夹，请帮我如何将图像保存到文件夹中。我的代码在这里： -

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()
}

这是这个jquery的HTML代码： -

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>

请帮帮我。



先谢谢。



Ankit Agarwal

网站开发人员

Please help me.

Thanks in Advance.

Ankit Agarwal
Website Developer

推荐答案

element =

element =

（元素）

this 。

input = this 。

这篇关于如何使用jquery将图像保存到路径中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！