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>
leave a comment