Cài đặt jQuery Uploadify với CodeIgniter
jQuery Uploadify là một plugin cho phép upload nhiều file lên server cùng một lúc. Bạn có thể tải Uploadify tại đây.
Do Uploadify dựa vào Flash để upload file, kiểu file gửi lên server bao giờ cũng là application/octet-stream, còn CodeIgniter lại chỉ hỗ trợ cơ chế kiểm tra file upload thông qua kiểu mimes để đảm bảo tính bảo mật của website, nên khi nhúng Uploadify vào CodeIgniter, chương trình sẽ không chạy theo ý mình.
Để sửa lỗi này, có 2 cách thường được dùng:
1 – Sửa lại CodeIgniter Upload library để nhận kiểu file thông qua file extension thay vì mime types.
2 – Sửa lại file config/mimes.php trong ứng dụng, thêm vào kiểu “application/octet-stream” vào các kiểu file cho phép upload.
Ngoài ra, ta có thể mở file .fla đi kèm với Uploadify và sửa lại nội dung file này để gửi kiểu file đúng cho CodeIgniter.
Đối với cách 1, nếu người dùng cố tình đổi đuôi file (vd, từ .png thành .exe), chương trình sẽ lập tức từ chối, không cho phép người dùng upload lên (vì sai đuôi). Cách 2 tối ưu hơn cách 1, nhưng giả dụ bạn có 1 trang chỉ cho phép upload văn bản .txt, một trang cho up ảnh .png, vậy bạn phải sửa lại config/mimes.php 2 lần liền. Như vậy khá là mất thời gian ngồi sửa từng dòng của config/mimes.php
Một cách trung gian là vẫn ứng dụng phép kiểm tra mimes của CI, nhưng thêm kiểu file “application/octet-stream” vào cho mỗi kiểu file được phép upload lên.
Ta thực hiện phương pháp này bằng cách viết phần mở rộng application/libraries/MY_Upload.php:
<?php
class MY_Upload extends CI_Upload
{
var $uploadify = FALSE;
function initialize($config = array()){
parent::initialize($config);
if (array_key_exists('uploadify', $config)) $this->uploadify = $config['uploadify'];
}
/**
* Verify that the filetype is allowed
*
* @access public
* @param allow_flash = FALSE
* @return bool
*/
function is_allowed_filetype()
{
if (count($this->allowed_types) == 0 OR ! is_array($this->allowed_types))
{
$this->set_error('upload_no_file_types');
return FALSE;
}
$image_types = array('gif', 'jpg', 'jpeg', 'png', 'jpe');
foreach ($this->allowed_types as $val)
{
$mime = $this->mimes_types(strtolower($val));
if ($this->uploadify)
if (is_array($mime)) $mime[] = 'application/octet-stream';
else $mime = array($mime, 'application/octet-stream');
// Images get some additional checks
if (in_array($val, $image_types))
{
if (getimagesize($this->file_temp) === FALSE)
{
return FALSE;
}
}
if (is_array($mime))
{
if (in_array($this->file_type, $mime, TRUE))
{
return TRUE;
}
}
else
{
if ($mime == $this->file_type)
{
return TRUE;
}
}
}
return FALSE;
}
}
/* End of file : application/libraries/MY_Upload.php */
/* Author: Nguyen Dinh Trung <nguyendinhtrung141@gmail.com> */
Giờ ta có thể thực hiện việc upload thông qua Uploadify bằng các Controllers và View sau:
Controller : application/controllers/upload.php
<?php
class Upload extends Controller
{
function Upload()
{
parent::Controller();
$this->load->helper('form');
$this->load->helper('url');
}
/*
* Display upload form
*/
function index()
{
$this->load->view('form');
}
/*
* Handles JSON returned from /js/uploadify/upload.php
*/
function uploadify()
{
$config['upload_path'] = APPPATH . 'assets/uploads/';
$config['uploadify'] = TRUE;
$config['allowed_types'] = 'csv';
$config['max_size'] = '100';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$this->load->library('upload', $config);
if (! $this->upload->do_upload('Filedata')){
echo ($this->upload->display_errors());
} else {
foreach($this->upload->data() as $k => $v) echo "<strong>$k</strong> : <em>$v</em><br>";
}
}
}
/* End of File /application/controllers/upload.php */
View: application/views/form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Uploadify Demo</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>js/uploadify/uploadify.css" />
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url();?>assets/js/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#upload").uploadify({
uploader: '<?php echo base_url();?>assets/js/uploadify/uploadify.swf',
script: '<?php echo base_url();?>upload/test',
cancelImg: '<?php echo base_url();?>assets/js/uploadify/cancel.png',
scriptAccess: 'always',
multi: true,
'onError' : function (a, b, c, error) {
if (d.status == 404)
alert('Could not find upload script.');
else if (d.type === "HTTP")
alert('error '+d.type+": "+d.status);
else if (d.type ==="File Size")
alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
else
alert('error '+error.type+": "+d.text);
},
'onComplete' : function(a,b,c,response,e) {
$("#notify").html(response);
}
});
});
</script>
</head>
<body>
<h1>Uploadify Example</h1>
<?php echo form_open_multipart('upload/index');?>
<div id="notify"> </div>
<p>
<label for="Filedata">Choose a File</label><br/>
<?php echo form_upload(array('name' => 'Filedata', 'id' => 'upload'));?>
<a href="javascript:$('#upload').uploadifyUpload();">Upload File(s)</a>
</p>
<?php echo form_close();?>
</body>
</html>
Cài đặt jQuery Uploadify với CodeIgniter
jQuery Uploadify là một plugin cho phép upload nhiều file lên server cùng một lúc. Bạn có thể tải Uploadify tại đây.
Do Uploadify dựa vào Flash để upload file, kiểu file gửi lên server bao giờ cũng là application/octet-stream, còn CodeIgniter lại chỉ hỗ trợ cơ chế kiểm tra file upload thông qua kiểu mimes để đảm bảo tính bảo mật của website, nên khi nhúng Uploadify vào CodeIgniter, chương trình sẽ không chạy theo ý mình.
Để sửa lỗi này, có 2 cách thường được dùng:
1 – Sửa lại CodeIgniter Upload library để nhận kiểu file thông qua file extension thay vì mime types.
2 – Sửa lại file config/mimes.php trong ứng dụng, thêm vào kiểu “application/octet-stream” vào các kiểu file cho phép upload.
Ngoài ra, ta có thể mở file .fla đi kèm với Uploadify và sửa lại nội dung file này để gửi kiểu file đúng cho CodeIgniter.
Đối với cách 1, nếu người dùng cố tình đổi đuôi file (vd, từ .png thành .exe), chương trình sẽ lập tức từ chối, không cho phép người dùng upload lên (vì sai đuôi). Cách 2 tối ưu hơn cách 1, nhưng giả dụ bạn có 1 trang chỉ cho phép upload văn bản .txt, một trang cho up ảnh .png, vậy bạn phải sửa lại config/mimes.php 2 lần liền. Như vậy khá là mất thời gian ngồi sửa từng dòng của config/mimes.php
Một cách trung gian là vẫn ứng dụng phép kiểm tra mimes của CI, nhưng thêm kiểu file “application/octet-stream” vào cho mỗi kiểu file được phép upload lên.
Ta thực hiện phương pháp này bằng cách viết phần mở rộng application/libraries/MY_Upload.php:
<?php
class MY_Upload extends CI_Upload
{
var $allow_flash = FALSE;
function initialize($config = array()){
parent::initialize($config);
if (array_key_exists('allow_flash', $config)) $this->allow_flash = $config['allow_flash'];
}
/**
* Verify that the filetype is allowed
*
* @access public
* @param allow_flash = FALSE
* @return bool
*/
function is_allowed_filetype()
{
if (count($this->allowed_types) == 0 OR ! is_array($this->allowed_types))
{
$this->set_error('upload_no_file_types');
return FALSE;
}
$image_types = array('gif', 'jpg', 'jpeg', 'png', 'jpe');
foreach ($this->allowed_types as $val)
{
$mime = $this->mimes_types(strtolower($val));
if ($this->allow_flash)
if (is_array($mime)) $mime[] = 'application/octet-stream'; else $mime = array($mime, 'application/octet-stream');
// Images get some additional checks
if (in_array($val, $image_types))
{
if (getimagesize($this->file_temp) === FALSE)
{
return FALSE;
}
}
if (is_array($mime))
{
if (in_array($this->file_type, $mime, TRUE))
{
return TRUE;
}
}
else
{
if ($mime == $this->file_type)
{
return TRUE;
}
}
}
return FALSE;
}
}
/* End of file : application/libraries/MY_Upload.php */
/* Author: Nguyen Dinh Trung <nguyendinhtrung141@gmail.com> */
Giờ ta có thể thực hiện việc upload thông qua Uploadify bằng các Controllers và View sau:
Controller : application/controllers/upload.php
<?php
class Upload extends Controller
{
function Upload()
{
parent::Controller();
$this->load->helper('form');
$this->load->helper('url');
}
/*
* Display upload form
*/
function index()
{
$this->load->view('form');
}
/*
* Handles JSON returned from /js/uploadify/upload.php
*/
function uploadify()
{
$config['upload_path'] = APPPATH . 'assets/uploads/';
$config['allow_flash'] = TRUE;
$config['allowed_types'] = 'csv';
$config['max_size'] = '100';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$this->load->library('upload', $config);
if (! $this->upload->do_upload('Filedata')){
echo ($this->upload->display_errors());
} else {
echo json_encode($this->upload->data());
}
}
}
/* End of File /application/controllers/upload.php */
View: application/views/form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Uploadify Demo</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>js/uploadify/uploadify.css" />
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url();?>assets/js/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#upload").uploadify({
uploader: '<?php echo base_url();?>assets/js/uploadify/uploadify.swf',
script: '<?php echo base_url();?>upload/test',
cancelImg: '<?php echo base_url();?>assets/js/uploadify/cancel.png',
scriptAccess: 'always',
multi: true,
'onError' : function (a, b, c, error) {
if (d.status == 404)
alert('Could not find upload script.');
else if (d.type === "HTTP")
alert('error '+d.type+": "+d.status);
else if (d.type ==="File Size")
alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
else
alert('error '+error.type+": "+d.text);
}
'onComplete' : function(a,b,c,response,e) {
$("#notify").html(response);
}
});
});
</script>
</head>
<body>
<h1>Uploadify Example</h1>
<?php echo form_open_multipart('upload/index');?>
<div id="notify"> </div>
<p>
<label for="Filedata">Choose a File</label><br/>
<?php echo form_upload(array('name' => 'Filedata', 'id' => 'upload'));?>
<a href="javascript:$('#upload').uploadifyUpload();">Upload File(s)</a>
</p>
<?php echo form_close();?>
</body>
</html>
jQuery & CodeIgniter trong form
Làm sao để tạo một form Ajax với jQuery và thư viện Form_validation của CodeIgniter?
Trước hết, ta tạo một controller như sau:
class Devel extends Controllers
{
function index(){
$this->load->library('form_validation');
# Đặt các luật kiểm tra cho Form.
$this->form_validation->set_rules("username", "Tên đăng nhập", "required|trim|xss_clean|max_length(20)");
$this->form_validation->set_rules("password", "Mật khẩu", "required|trim|xss_clean|max_length(20)");
$this->form_validation->set_rules("password_again", "Nhập lại Mật khẩu", "required|trim|xss_clean|max_length(20)|match(password)");
if ($this->form_validation->run()){
# Form kiểm tra ok!
echo "<div class='success'>Đã kiểm tra form, không có lỗi gì hết!</div>";
} else {
# Form chưa kiểm tra, hoặc chưa chạy.
if ($this->input->post('uniqueid')){
# Form đã khởi tạo và được chạy ít nhất 1 lần. Trả về mã lỗi kiểm tra form
echo "<div class='error'>".$this->form_validation->error_string()."</div>";
} else {
# Chưa khởi tạo form.
$default['username'] = 'username';
$default['password'] = '';
$default['password_again'] = '';
$this->load->helper('string');
$default['uniqueid'] = random_string('unique');
$this->load->view('form', $default);
}
}
}
}
/* End of class Devel */
/* Author : Nguyen Dinh Trung <nguyendinhtrung141@gmail.com> */
Tiếp đó tạo view như sau:
<html>
<head>
<title>Example Form</title>
<script type='text/javascript' src='<?= base_url(); ?>assets/js/jquery.js'></script>
</head>
<body>
<form id='myform' method='post'>
<div id="notify"></div>
<fieldset><legend>Xác nhận mật khẩu</legend>
<input type='hidden' name='uniqueid' value='<?= $uniqueid; ?>'>
<label for='username'>Tên đăng nhập</label>
<input type='text' name='username' id='username' value='<?= set_value('username', $username); ?>'>
<label for='password'>Mật khẩu</label>
<input type='password' name='password' id='password' value='<?= set_value('password', $password); ?>'>
<label for='password_again'>Mật khẩu</label>
<input type='password_again' name='password_again' id='password_again' value='<?= set_value('password_again', $password_again); ?>'>
</fieldset>
<fieldset>
<button type='button' id='submit'>Gửi</button>
<button type='reset' id='reset'>Nhập lại</button>
</fieldset>
</form>
<script type='text/javascript'>
$(document).ready(function(){
$("#submit").click(function(){
$.post("<?= current_url(); ?>", $("#myform").serializeArray(), function(response){$("#notify").html(response);});
});
});
</script>
</body>
</html>
Với jQuery, ta có thể gửi form dễ dàng với phương thức POST bằng 1 dòng như sau:
$.post("url", {"username":1234, "password":4567}, <callback>});
Trong đó callback là hàm xử lý dữ liệu mà server trả về. Như trong file view ở trên, tôi lấy toàn bộ chuỗi văn bản mà server trả về, đem nhét nó vào trong vùng <div id=”notify”></div>.
- Khi mới truy cập đến trang devel/index, do form chưa được khởi tạo nên không có giá trị gì trong biến $this->input->post(‘uniqueid’). Sự kiện này báo với controller rằng hãy hiển thị form và view với các thông số được chọn. Chuỗi uniqueid là một chuỗi ngẫu nhiên được tạo nhờ string helper của CI.
- Sau khi người dùng bấm vào nút Submit, jQuery sẽ gửi dữ liệu lên Server. Dữ liệu được gửi chính là nội dung Form lấy được nhờ lệnh $(“#myform”).serializeArray().
- Tại server, CI nhận thấy có trường uniqueid, nên thay vì tạo form thông qua View, CI chỉ gửi lại thông báo lỗi (trong trường hợp Form không chạy), hoặc thông báo thành công (trong trường hợp kiểm tra thành công).
- jQuery nhận được bản tin từ server và chèn chuỗi nhận được đó vào trong div id=”notify”.
leave a comment