如何在 Codeigniter 中通过 csrf、ajax 使用 fileuploader.js?
我正在使用 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.php
和 image_moo.php
。
我得到
500 Internal Server Error
,网址为
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
采用不同的网址进行上传。
已添加
嗯,我没有对 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('');
}
});
}
这里有两个问题。
首先:您需要在每个ajax请求中设置csrf令牌。这简单。
第二:上传时需要设置csrf token。这是不可能的。
但是您肯定还有其他选择。 别担心!.
每种方法,如编辑标题或删除等..你可以这样解决:
在你的
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_name
和 csrf_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 中解决,这在使用多部分编码请求时会产生问题。
希望我有所帮助。
image_crud 的作者刚刚推出了一个使用最新版本 Fine Uploader 的新版本。 IE 问题和您可能遇到的其他问题应该在最新版本中得到解决。 您现在应该能够使用 csrf 令牌,而无需进行最少的重新配置。