使用在codeigniter fileuploader.js随着CSRF在阿贾克斯fileuploader、codeigniter、js、阿贾克斯
我如何使用codeigniter fileuploader.js与CSRF，在阿贾克斯？
我现在用的是images_crud库http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-$c$cigniter/
我不断收到
您所请求的操作是不允许的。
添加...
我已经添加了创建控制器方法：
/ **
*页形成
* /
公共函数来创建（）{
如果（使用isset（$这个 - ＆GT;！数据['输出']））{
$这个 - ＆GT;数据= array_merge（$这个 - ＆GT;的数据，
阵列（'输出'=＆GT;''，
js_files'=＆GT;阵列（），
css_files'=＆GT;阵列（）
）
）;
}
// -------------------------
//进行文件上传
$ image_crud =新image_CRUD（）;
$ image_crud-＆GT; set_primary_key_field（'身份证'）;
$ image_crud-＆GT; set_url_field（'文件名'）;
$ image_crud-＆GT; set_table（新闻）
- ＆GT; set_image_path（公共/文件'）;
$输出= $ image_crud-＆GT;渲染（）;
$这个 - ＆GT;数据['输出'] = $输出 - ＆GT;输出;
$这个 - ＆GT;数据['js_files'] = $输出 - ＆GT; js_files;
$这个 - ＆GT;数据['css_files'] = $输出 - ＆GT; css_files;
// -------------------------
//显示
$这个 - ＆GT;负载＆gt;查看（'模板/ admin_header'）;
$这个 - ＆GT;负载＆gt;查看（管理/的index.php'）;
$这个 - ＆GT;负载＆gt;查看（管理/ create_pages.php'，$这个 - ＆GT;数据）;
$这个 - ＆GT;负载＆gt;查看（'模板/ admin_footer'）;
}
而 create_pages 鉴于：
＆LT; PHP的，如果（定义（BASEPATH'）！）出口（'没有直接的脚本允许访问）; ？＆GT;
＆LT;？PHP的回声validation_errors（）＆GT？;
＆LT; PHP
的foreach（$ css_files为$文件）：＆GT;
＆LT;链接类型=文本/ CSS相对=样式表的href =＆LT; PHP的echo $文件;？＆gt;中/＆GT;
＆LT; PHP endforeach; ？＆GT;
？＆LT; PHP的foreach（$ js_files为$文件）：＆GT;？
＆LT;脚本SRC =＆LT; PHP的echo $文件;？＆GT;＆GT;＆LT; / SCRIPT＆GT;
＆LT; PHP endforeach; ？＆GT;
？＆LT; PHP的回声form_open（SITE_URL（管理/页/保存），阵列（'风格'=＆GT;宽度：700像素;'））＆GT;？
＆LT;标签＆gt;
标题
＆LT;输入类型=文本名称='标题'值='＆LT;？PHP的回声@ $标题＆GT;？ /＆GT;
＆LT; /标签＆gt;
＆LT; BR /＆GT;
内容 ：
＆LT; textarea的名字=内容ID =内容＆GT;
＆LT;？PHP的回声@ $内容＆GT;
＆LT; / textarea的＆GT;
＆LT; BR /＆GT;
＆LT;？PHP的echo $输出＆GT;
＆LT;输入类型=提交名称=提交值='保存'/＆GT;
＆LT; /形式GT;
我在库中添加 image_crud.php 和 image_moo.php 。
我收到 500内部服务器错误 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 正在采取不同的URL上传。
添加
嗯，我还没有做出太多改变的编码从http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-$c$cigniter/
$（函数（）{
＆LT;？PHP如果（！$ unset_upload）{＆GT;
createUploader（）;
＆LT; PHP}＆GT？;
loadColorbox（）;
}）;
功能loadColorbox（）
{
$（'。彩箱）。颜色框（{
REL：彩盒
}）;
}
功能loadPhotoGallery（）{
$阿贾克斯（{
网址：'？＆LT; PHP的echo $ ajax_list_url＆GT;'，
数据类型：文本，
数据：$（'输入[类型=隐藏]'）方程（1）.prop（名称）+：+ $（'输入[类型=隐藏]'）方程（1）.prop（'。值'），
beforeSend：函数（）
{
$（'文件上传，邮件容器：第一'）显示（）。
$（'文件上传消息）HTML（＆LT; PHP的echo $这个 - →1（'装'）;？＆gt;中）;
}，
完成：函数（）
{
$（'文件上传，邮件容器）隐藏（）;
$（'文件上传消息）HTML（''）。
}，
成功：功能（数据）{
$（'＃阿贾克斯列表）HTML（数据）。
loadColorbox（）;
}
}）;
}
功能createUploader（）{
VAR上传=新qq.FileUploader（{
元素：的document.getElementById（'文件上传-demo1的），
模板：'＆LT; DIV CLASS =QQ-上传＆GT; +
'＆所述;股利类=QQ-载降区＆GT;＆其中;跨度＆GT;＆所述; PHP回声$这 - →1（上载降区）;？＆GT;＆所述; /跨度＆GT; ＆LT; / DIV＆GT; +
'＆LT; DIV CLASS =QQ上传按钮＆GT;＆LT; PHP的echo $这个 - →1（upload_button）;？＆GT;＆LT; / DIV＆GT; +
'＆LT; UL类=QQ上传列表＆GT;＆LT; / UL＆GT; +
'＆LT; / DIV＆GT;'，
fileTemplate：'＆LT;李＆GT; +
'＆LT;跨度类=QQ上传文件＆GT;＆LT; / SPAN＆GT; +
'＆LT;跨度类=QQ上传微调＆GT;＆LT; / SPAN＆GT; +
'＆LT;跨度类=QQ上传大小＆GT;＆LT; / SPAN＆GT; +
'＆LT;一类=QQ上传-取消的href =＃＆GT;＆LT; PHP的echo $这个 - →1（上传 - 取消）;？＆GT;＆LT; / A＆GT; +
'＆LT;跨度类=QQ上传-失败文本＆GT;＆LT; PHP的echo $这个 - →1（上载失败）;？＆GT;＆LT; / SPAN＆GT; +
'＆LT; /李＆GT;'，
动作：'？＆LT; PHP的echo $ UPLOAD_URL＆GT;'，
调试：真实，
的onComplete：功能（ID，文件名，responseJSON）{
loadPhotoGallery（）;
}
}）;
}
功能saveTitle（data_id，data_title）
{
$阿贾克斯（{
网址：'＆LT; PHP的echo $ insert_title_url; ？＆GT;'，
类型：'后'，
数据：{primary_key：data_id，值：data_title}，
beforeSend：函数（）
{
$（'文件上传，邮件容器：第一'）显示（）。
$（'文件上传消息）HTML（＆LT; PHP的echo $这个 - →1（saving_title'）;？＆gt;中）;
}，
完成：函数（）
{
$（'文件上传，邮件容器）隐藏（）;
$（'文件上传消息）HTML（''）。
}
}）;
}
解决方案
在这里你有两个问题。
第一：您需要设置的 CSRF令牌与每一个Ajax请求。这是简单
二：您需要设置的 CSRF令牌上载时的。这是不可能的。
但一定要在这里有其他选择。 别担心！
每一种方法像编辑或删除等..你可以解决这个问题是这样的：
在 list.php的在第一个：
$这个 - ＆GT; set_css（资产/ image_crud / CSS / fileuploader.css'）;
$这个 - ＆GT; set_css（资产/ image_crud / CSS / photogallery.css'）;
$这个 - ＆GT; set_css（资产/ image_crud / CSS / colorbox.css'）;
$这个 - ＆GT; set_js（资产/ image_crud / JS / jQuery的-1.8.2.min.js'）;
$这个 - ＆GT; set_js（资产/ image_crud / JS / jQuery的-UI-1.9.0.custom.min.js'）;
$这个 - ＆GT; set_js（资产/ image_crud / JS / fileuploader.js'）;
$这个 - ＆GT; set_js（资产/ image_crud / JS / jquery.colorbox-min.js'）;
$ CI =＆放大器; get_instance（）; //创建codeigniter参考实例。
然后：的
函数saveTitle（data_id，data_title）
{
$阿贾克斯（{
网址：'＆LT; PHP的echo $ insert_title_url; ？＆GT;'，
类型：'后'，
数据：{primary_key：data_id，值：data_title，
'＆LT;？PHP的echo $ CI-＆GT;安全 - ＆GT; get_csrf_token_name（）; ？＆GT;'：'？＆LT; PHP的echo $ CI-＆GT;安全 - ＆GT; get_csrf_hash（）; ？＆GT;}，
beforeSend：函数（）
{
$（'文件上传，邮件容器：第一'）显示（）。
$（'文件上传消息）HTML（＆LT; PHP的echo $这个 - →1（saving_title'）;？＆gt;中）;
}，
完成：函数（）
{
$（'文件上传，邮件容器）隐藏（）;
$（'文件上传消息）HTML（''）。
}
}）;
}
简单的解决方案。只需添加 csrf_token_name 和 csrf_hash_value 。
现在在第二个问题我说，这是不可能的，因为在 qq.fileuploader
使用 $ _ GET ，而不是 $ _ POST ，所以物业 PARAMS ，它们的价格只是增加了一个get 参数为你将不会被 csrf_verify（）方式进行解析。
如何解决这个问题：只是去你的配置/ config.php文件并添加下列code到它的结束：
如果（stripos函数（$ _ SERVER [REQUEST_URI]，'/ upload_file'）=== FALSE）
{
$配置['csrf_protection'] = TRUE;
}
其他
{
$配置['csrf_protection'] = FALSE;
}
这将禁止上传CSRF检查你（它会被上传时禁用只），它会与下一个请求重新启用它。
我已经测试了这个code和它的工作100％。 ：）
更新：的主要问题包括了image_crud开发商没有考虑多部分连接codeD请求（我可以从新的结果中看到的）。而他使用的是旧版本的 fineuploader 。问题是解决 fineuploader 3.0 + ，但尚未在 image_crud 这是使用多恩codeD请求时，决策问题。
希望我帮助。的
How do I use fileuploader.js in Codeigniter with csrf, in ajax?
I am using the images_crud library http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/
I keep getting
The action you have requested is not allowed.
Added..
I have added the create method in the controller :
/**
* 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');
}
And the create_pages in view :
<?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>
I have added image_crud.php and image_moo.php in the library.
I am getting 500 Internal Server Error with the url being
http://example.com/mole/pages/create/upload_file?qqfile=1355936206.9151.jpg
which I wanted to be http://example.com/mole/admin/pages/create/upload_file?qqfile=1355936206.9151.jpg
I am not sure why the fileuploader.js is taking a different url for uploading.
Added
Well, I have not made much changes to the codings avilaible from 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('');
}
});
}
解决方案
here you have two problems.
First: you need to set the csrf token with every ajax request. which is simple.
Second: you need to set the csrf token for when uploading. which is impossible.
But sure you have other alternatives here. DON'T Worry!.
each method like edit title or delete etc.. you can solve it like this:
in your list.php at the very first:
$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.
Then:
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('');
}
});
}
simple solution. just adding the csrf_token_name and csrf_hash_value.
now for the second problem I said that it's impossible because the qq.fileuploader
uses $_GET and not $_POST, so the property params they offer just adds a get argument for you which will not be parsed by csrf_verify() method.
how to solve it: simply go to your config/config.php and add the following code to the end of it:
if(stripos($_SERVER["REQUEST_URI"],'/upload_file') === FALSE)
{
$config['csrf_protection'] = TRUE;
}
else
{
$config['csrf_protection'] = FALSE;
}
which will disable the uploading csrf checking for you ( it will be disabled just when uploading ) and it will re-enable it with the next request.
I have tested this code and it's working 100%. :)
Update: the main problem consists of that the developer of image_crud has not considered multipart encoded request ( as I can see from the new results). and he is using an old version of fineuploader. the problem is solved by fineuploader 3.0+ but not yet in image_crud which is making problems when using multipart encoded request.
Hope that I helped.
