Javascript 如何在ajax中通过图像上传制作csrf？

我尝试了不同的方法，但仍然找不到解决方案

我需要上传一个带有字段（标题、说明和2个图像）的表单图像

我的系统使用CodeIgniter的csrf。我使用这个简单的第三方文件上传程序（）fileinput.js

                var Fileinput = 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">').insertBefore(this.$input)
                }

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

              Fileinput.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))
              },

              Fileinput.prototype.change = function(e) {
                var files = e.target.files === undefined ? (e.target && e.target.value ? [{ name: e.target.value.replace(/^.+\\/, '')}] : []) : e.target.files

                e.stopPropagation()

                if (files.length === 0) {
                  this.clear()
                  return
                }

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

                var file = files[0]

                if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match(/^image\/(gif|png|jpeg)$/) : 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>')
                    $img[0].src = re.target.result
                    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', files)
                  }

                  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')
                }
              },

              Fileinput.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
                this.$input.val('')

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

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

              Fileinput.prototype.reset = function() {
                this.clear()

                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')
              },

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


              // FILEUPLOAD PLUGIN DEFINITION
              // ===========================

              var old = $.fn.fileinput

              $.fn.fileinput = function (options) {
                return this.each(function () {
                  var $this = $(this),
                      data = $this.data('bs.fileinput')
                  if (!data) $this.data('bs.fileinput', (data = new Fileinput(this, options)))
                  if (typeof options == 'string') data[options]()
                })
              }

              $.fn.fileinput.Constructor = Fileinput


              // FILEINPUT NO CONFLICT
              // ====================

              $.fn.fileinput.noConflict = function () {
                $.fn.fileinput = old
                return this
              }


              // FILEUPLOAD DATA-API
              // ==================

              $(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
                var $this = $(this)
                if ($this.data('bs.fileinput')) return
                $this.fileinput($this.data())

                var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
                if ($target.length > 0) {
                  e.preventDefault()
                  $target.trigger('click.bs.fileinput')
                }
              });

选择图像后，JavaScript将处理以在PHP控制器/模型中上载图像。当我试图研究Firebug时，这篇文章有如下价值：

ÿØÿà�JFIF������ÿÛ��

然后在CodeIgniter中找到的response选项卡中是这样的（这可能是因为post数据中不包含csrf）：

对于php，我将只使用以下代码（仍然不确定如何在php中处理它）：

我不知道如何使用上传器（具有文件预览）和CodeIgniter中的csrf上传图像

---

过程是这样的，在选择图像后，ajax将其上载到服务器（临时文件夹），并返回一个新文件名（在php中上载时启用加密）

我认为您需要通过将其与“file”变量中的数据一起附加来发送“CSRF”令牌。请找到它的结构，并尝试在“csrf”后面加上它，假设js中的csrf_val具有“csrf”标记@我在网上找到的arunWhat在ajax中是仅csrf或仅图像。看起来您可以使用

enctype=multipart/form data

提交带有文件和其他字段（包括隐藏的csrf令牌）的表单。请参见一个示例。@ourmandave非常感谢您将检查该链接。我认为您需要通过在'file'变量中附加数据来发送'CSRF'令牌。请找到它的结构，并尝试在“csrf”后面加上它，假设js中的csrf_val具有“csrf”标记@我在网上找到的arunWhat在ajax中是仅csrf或仅图像。看起来您可以使用

enctype=multipart/form data

提交带有文件和其他字段（包括隐藏的csrf令牌）的表单。请看一个例子。@ourmandave非常感谢您将查看该链接。

    var csrf_val = $('#csrf').val();
    var csfrData = {};
    csfrData['csrf_name'] = csrf_val;
    sendFile(this.files[0]);
    function sendFile(file) {
        $(function() {
            $.ajaxSetup({
               data: csfrData
            });
        });
        $.ajax({
            method: 'post',
            url: _admin_url + _curr_mod+'/procedure/uload-image',
            data: file,
            success: function() {
                alert('upload is ok!');
            },
            processData: false
        });
    }

ÿØÿà�JFIF������ÿÛ��

An Error Was Encountered
The action you have requested is not allowed.

$_FILES['file']