在web開發(fā)中，圖片上傳是非常常見的需求。本文將介紹使用codeigniter和jquery實現(xiàn)圖片上傳的方法。

首先，在codeigniter中，我們需要安裝任意一個文件上傳類庫，例如CI自帶的Upload類、CURL File Interface等。這里我們以CI自帶的Upload類為例：

$this->load->library('upload'); //加載Upload類
$config['upload_path'] = './uploads/'; //上傳文件保存路徑
$config['allowed_types'] = 'gif|jpg|png'; //允許上傳的文件類型
$config['max_size'] = '100'; //允許上傳的最大文件大小
$this->upload->initialize($config); //初始化配置
if ($this->upload->do_upload('file')) //上傳文件
{
//上傳成功
}
else
{
//上傳失敗
}

其中，'file'是我們前端頁面標簽中的name屬性，后面的代碼根據(jù)上傳結(jié)果進行相應(yīng)的處理。接著，我們需要在前端頁面中使用jquery實現(xiàn)圖片上傳的功能。

$(document).on('change', 'input[type="file"]', function () { //選擇文件時觸發(fā)
var file_data = $(this).prop('files')[0]; 
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: '/upload',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (data) {
//上傳成功
},
error: function (xhr, textStatus, errorThrown) {
//上傳失敗
}
});
});

以上代碼監(jiān)聽了前端頁面中的標簽的選擇文件事件，創(chuàng)建了FormData對象，將文件添加到其中，使用ajax發(fā)送post請求，實現(xiàn)了圖片的上傳。需要注意的是，需要將contentType屬性設(shè)置為false，使jquery不對FormData進行處理，同時也需要將processData屬性設(shè)置為false，避免jquery對數(shù)據(jù)進行轉(zhuǎn)換。

最后，將前后端代碼結(jié)合起來，實現(xiàn)了圖片上傳功能的完整代碼：

//jquery代碼
$(document).on('change', 'input[type="file"]', function () { //選擇文件時觸發(fā)
var file_data = $(this).prop('files')[0]; 
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: '/upload',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (data) {
//上傳成功
},
error: function (xhr, textStatus, errorThrown) {
//上傳失敗
}
});
});
//CI控制器代碼
public function upload()
{
$this->load->library('upload'); //加載Upload類
$config['upload_path'] = './uploads/'; //上傳文件保存路徑
$config['allowed_types'] = 'gif|jpg|png'; //允許上傳的文件類型
$config['max_size'] = '100'; //允許上傳的最大文件大小
$this->upload->initialize($config); //初始化配置
if ($this->upload->do_upload('file')) //上傳文件
{
//上傳成功
}
else
{
//上傳失敗
}
}