jqGrid 實用技巧 (七) 上傳檔案

最 多 朋 友 奇 怪 的 ,就 是 為 何 jqGrid 內 建 有 edittype:’file’,卻 沒 有 內 建 檔 案 上 傳 之 功 能 。於 是 筆 者 今 次 就 實 作 一 個 圖 片 的 欄 位 給 大 家 參 考 參 考 。

根 據 jqGrid wiki 的 介 紹 ,我 們 尚 要 使 用 另 一 個 plugin – Ajax File Upload 來 完 床 上 傳 檔 案 的 動 作 。

...
<head>
...
<script type="text/javascript" src="ajaxfileupload.js"></script>
...
</head>
...

跟 使 用 其 它 jquery plugin 一 樣 ,首 先 要 include 那 個 plugin 的 javascript file。

然 後 就 到 設 定 圖 片 欄 位 的 colModel。

...
colModel :[
....
{name:'imgurl',index:'imgurl',width:50,formatter:showPicture,search:false,editable:true,edittype:'file',editoptions:{enctype:"multipart/form-data"},formoptions:{elmsuffix:'<font color=red>*Suggested Size:220x220px</font>'}},
....
],
...

筆 者 不 太 喜 歡 把 圖 片 儲 存 到 資 料 庫 裡 面 ,所 以 資 料 庫 裡 面 的 資 料 只 會 是 圖 片 的 路 徑 。於 是 筆 者 就 要 在 formatter 用 一 條 custom function (showPicture) 把 圖 片 顯 示 出 來 。要 上 傳 檔 案 ,除 了 edittype 要 用 file,那 個 editoptions 還 要 增 加  enctype:”multipart/form-data”。

上 傳 檔 案 的 表 單 ,很 多 時 候 都 會 加 點 註 釋 ,讓 使 用 者 知 道 要 上 傳 什 麼 、有 沒 有 大 小 之 類 的 限 制 等 等 。jqGrid 的 formoptions 就 有 elmprefix 和 elmsuffix,可 以 在 輸 入 項 目 的 前 面 或 者 後 面 加 入 額 外 的 註 釋 。

function showPicture(cellvalue, options, rowObject){
return "<img src='" + cellvalue + "?" + Math.floor(Math.random()*100) + "' height='50' width='50'>";
}

前 面 幾 回 筆 者 也 講 過 圖 片 的 formatter,不 外 乎 是 把 資 料 庫 的 圖 片 路 徑 變 成 一 個 tag 而 已 。因 為 筆 者 喜 歡 用 index number 來 做 圖 片 名 稱 (貪 其 不 會 重 複 ),於 是 同 一 筆 資 料 ,不 管 更 新 多 少 次 ,圖 片 的 名 稱 都 是 一 樣 (例 如 :1.jpg)。所 以 ,筆 者 就 會 在 圖 片 後 面 加 一 串 隨 機 亂 數 ,確 保 圖 片 每 一 次 都 會 從 伺 服 器 更 新 (www.abc.com/1.jpg?234)。

因 為 沒 有 加 上 hidden 參 數 ,所 以 圖 片 是 會 顯 示 在 grid 的 ,所 以 要 規 定 其 大 小 ,以 至 不 會 破 壞 grid 的 排 位 (height=50 width=50)。

在 jqGrid 儲 存 資 料 到 資 料 庫 ,我 們 要 指 定 editurl。但 那 個 editurl 是 不 會 管 檔 案 上 傳 的 ,於 是 我 們 要 在 Form Add 和 Form Edit 的 afterSubmit 事 件 ,加 入 我 們 做 檔 案 上 傳 的 function(processFile)。

...
$("#list").jqGrid({
....
colModel :[
....
{name:'imgurl',index:'imgurl',width:50,formatter:showPicture,search:false,editable:true,edittype:'file',editoptions:{enctype:"multipart/form-data"},formoptions:{elmsuffix:'<font color=red>*Suggested Size:220x220px</font>'}},
....
],
...
});

$("#list").jqGrid('navGrid','#pager',
{edit:true,add:true,del:false,search:false, view:true},
{afterSubmit:processFile},
{afterSubmit:processFile},
{},
{},
{}
);

afterSubmit 事 件 ,是 在 submit 完 成 之 後 引 發 的 ,就 是 說 ,其 他 資 料 都 已 經 寫 入 了 資 料 庫 了 。

function processFile(response, postdata){
var success = true;
var message = "";
var json = eval('(' + response.responseText + ')');
var id = json.id;

$.ajaxFileUpload({
 url: 'file_upload.php',
 secureuri: false,
 fileElementId: imgurl,
 dataType: 'json',
 data: { id: id },
 success: function (data, status) {
  if (typeof (data.success) != 'undefined') {
   if (data.success == true) {
    return;
   } else {
    alert(data.message);
   }
  }
 }
})

return [success,message];
}

這 條 自 定 義 function processFile,因 為 是 承 接 aftersubmit 事 件 ,所 以 會 有 response 的 json 資 料 ,這 是 從 你 的 editurl 傳 回 來 的 。

<?php
...
$id = mysql_insert_id();
$data['id'] = $id;
echo json_encode($data);
...
?>

例 如 我 在 上 面 的 editurl 的 php 檔 案 ,就 用 json 傳 回 了 剛 剛 新 增 的 index number 了 。

那 為 什 麼 要 id 呢 ?因 為 我 們 上 傳 檔 案 之 後 ,一 定 有 東 西 要 寫 入 資 料 庫 的 ,不 管 是 把 整 個 圖 像 寫 入 資 料 庫 ,還 是 像 筆 者 只 把 路 徑 寫 入 資 料 庫 。要 寫 東 西 入 資 料 庫 ,那 個 id 就 很 必 要 了 。

至 於 接 受 上 傳 檔 案 的 php,也 就 跟 你 平 常 用 form 做 的 upload 沒 兩 樣 。最 後 ,你 也 可 以 傳 回 success 和 error message 。

<?php
...
$id = $_POST['id'];
if($_FILES['imgurl']['size'] > 0){
 $target_path = "xxx/xxx/".$id.".jpg";
 move_uploaded_file($_FILES['imgurl']['tmp_name'], $target_path);
 ...
 $SQL="UPDATE xxx SET imgurl='$target_path' WHERE id=$id";
 ...
 $data['success']=true;
 echo json_encode($data);
}
ctleung張 先 生 ,男 性 ,肖 龍 。
職 業 :I.T. Consultant
簡 介 :不 好 好 讀 書 ;七 尺 差 五 寸 ,手 長 過 膝 ,雙 耳 垂 肩 ;性 寬 和 ,寡 言 語 ,喜 怒 不 形 於 色 。據 說 少 時 曾 斬 白 蛇 於 鳳 凰 山 下 ……
This entry was posted in jqGrid and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>