用笨fileuploader.js与阿贾克斯CSRF沿(Using fileuploader.js

2019-08-06 13:48发布

如何在笨使用fileuploader.js与CSRF,在阿贾克斯?

我现在用的是images_crud库http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/

我不断收到

The action you have requested is not allowed.

添加..

我已经加入了create控制器的方法:

/**
 * pages form
 */
public function create(){

    if(!isset($this->data['output'])){
        $this->data = array_merge($this->data, 
                        array(  'output'    => '' , 
                                'js_files'  => array() , 
                                'css_files' => array()
                            )
                        );
    }


    //-------------------------
    //for file uploading
    $image_crud = new image_CRUD();

    $image_crud->set_primary_key_field('id');
    $image_crud->set_url_field('filename');
    $image_crud->set_table('news')
        ->set_image_path('public/documents');

    $output = $image_crud->render();

    $this->data['output']=$output->output;
    $this->data['js_files']=$output->js_files;
    $this->data['css_files']=$output->css_files;
    //-------------------------


    //display
    $this->load->view('templates/admin_header');
    $this->load->view('admin/index.php');
    $this->load->view('admin/create_pages.php', $this->data);
    $this->load->view('templates/admin_footer');
}

create_pages考虑:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<?php echo validation_errors()?>

<?php 
foreach($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

<?php echo form_open(site_url('admin/pages/save'),array('style'=>'width:700px;'))?>

<label>
    Title
    <input type='text' name='title' value='<?php echo @$title?>' />
</label>
<br/>

content :
<textarea name="content" id="content" >
    <?php echo @$content?>
</textarea>
<br/>

<?php echo $output?>

<input type='submit' name='submit' value='save' />
</form>

我已经加入image_crud.phpimage_moo.php在库中。

我收到500 Internal Server Error URL为http://example.com/mole/pages/create/upload_file?qqfile=1355936206.9151.jpg

这是我想成为http://example.com/mole/admin/pages/create/upload_file?qqfile=1355936206.9151.jpg

我不知道为什么fileuploader.js正在采取不同的网址,上传。

添加

嗯,我还没有从做太多更改值编码avilaible http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/

$(function(){
<?php if ( ! $unset_upload) {?>
    createUploader();
<?php }?>
    loadColorbox();
});
function loadColorbox()
{
$('.color-box').colorbox({
    rel: 'color-box'
});
}
function loadPhotoGallery(){
$.ajax({
    url: '<?php echo $ajax_list_url?>',
    dataType: 'text',
    data:$('input[type=hidden]').eq(1).prop('name')+':'+$('input[type=hidden]').eq(1).prop('value'),
    beforeSend: function()
    {
        $('.file-upload-messages-container:first').show();
        $('.file-upload-message').html("<?php echo $this->l('loading');?>");
    },
    complete: function()
    {
        $('.file-upload-messages-container').hide();
        $('.file-upload-message').html('');
    },
    success: function(data){
        $('#ajax-list').html(data);
        loadColorbox();
    }
});
}
function createUploader(){
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            template: '<div class="qq-uploader">' +
                '<div class="qq-upload-drop-area"><span><?php echo $this->l("upload-drop-area");?></span></div>' +
                '<div class="qq-upload-button"><?php echo $this->l("upload_button");?></div>' +
                '<ul class="qq-upload-list"></ul>' +
                '</div>',
            fileTemplate: '<li>' +
                '<span class="qq-upload-file"></span>' +
                '<span class="qq-upload-spinner"></span>' +
                '<span class="qq-upload-size"></span>' +
                '<a class="qq-upload-cancel" href="#"><?php echo $this->l("upload-cancel");?></a>' +
                '<span class="qq-upload-failed-text"><?php echo $this->l("upload-failed");?></span>' +
                '</li>',
            action: '<?php echo $upload_url?>',
            debug: true,
            onComplete: function(id, fileName, responseJSON){
                loadPhotoGallery();
            }
        });
}
function saveTitle(data_id, data_title)
{
    $.ajax({
        url: '<?php echo $insert_title_url; ?>',
        type: 'post',
        data: {primary_key: data_id, value: data_title},
        beforeSend: function()
        {
            $('.file-upload-messages-container:first').show();
            $('.file-upload-message').html("<?php echo $this->l('saving_title');?>");
        },
        complete: function()
        {
            $('.file-upload-messages-container').hide();
            $('.file-upload-message').html('');
        }
        });
}

Answer 1:

在这里你有两个问题。

首先:你需要设置CSRF令牌与每一个Ajax请求。 这是简单的

第二:你需要设置上传时的CSRF令牌 。 这是不可能的。

但确保你有其他选择这里。 别担心!

像编辑或删除等各种方法..你可以解决这个问题是这样的:

list.php在第一个:

    $this->set_css('assets/image_crud/css/fileuploader.css');
    $this->set_css('assets/image_crud/css/photogallery.css');
    $this->set_css('assets/image_crud/css/colorbox.css');

    $this->set_js('assets/image_crud/js/jquery-1.8.2.min.js');
    $this->set_js('assets/image_crud/js/jquery-ui-1.9.0.custom.min.js');
    $this->set_js('assets/image_crud/js/fileuploader.js');
    $this->set_js('assets/image_crud/js/jquery.colorbox-min.js');
    $CI =& get_instance(); // create codeigniter reference instance.

然后:

function saveTitle(data_id, data_title)
{
        $.ajax({
            url: '<?php echo $insert_title_url; ?>',
            type: 'post',
            data: {primary_key: data_id, value: data_title,
            '<?php echo $CI->security->get_csrf_token_name(); ?>':'<?php echo $CI->security->get_csrf_hash(); ?>'},
            beforeSend: function()
            {
                $('.file-upload-messages-container:first').show();
                $('.file-upload-message').html("<?php echo $this->l('saving_title');?>");
            },
            complete: function()
            {
                $('.file-upload-messages-container').hide();
                $('.file-upload-message').html('');
            }
            });
}

简单的解决方案。 只需添加csrf_token_namecsrf_hash_value

现在对于第二个问题,我说,这是不可能的,因为qq.fileuploader使用$_GET ,而不是$_POST ,所以物业params ,它们的价格只增加了你一个GET 参数 ,它不会被csrf_verify()方法来解析。 如何解决这个问题:只是去你config/config.php和下面的代码添加到它的结束:

if(stripos($_SERVER["REQUEST_URI"],'/upload_file') === FALSE)
{
    $config['csrf_protection'] = TRUE;
}
else
{
    $config['csrf_protection'] = FALSE;
} 

这将禁用上传CSRF检查你(这将只是上传时被禁用),并与下一个请求会重新启用它。

我已经测试此代码,它的工作100%。 :)

更新:主要的问题是由于该image_crud的开发商还没有考虑多编码的请求 (因为我可以从新的结果中看到的)。 而他使用的是旧版本fineuploader的。 该问题由fineuploader 3.0+解决,但尚未在该image_crud使用多编码的请求时正在问题。

希望我帮助。



Answer 2:

image_crud的作者才刚刚推出,它利用最新版本的精细上传新版本。 与IE和其它问题,你可能已经遇到问题应固定在最新版本。 你应该能够使现在使用CSRF令牌没有最少的重新配置。



文章来源: Using fileuploader.js in codeigniter along with csrf in ajax