[TOC] # 圖片上傳 不知道大家注意到沒有，在我們整合系統的過程中，經常發現圖片上傳出現的問題！為什么這樣說呢？ 因為有各種上傳組件的方式，我們目前采用的是 swfupload ，而且目前上傳的方式還有很多很多，比較知名的有 webuploader、uploadify等等！ 我們逐一來分析，我們將來會用百度的 `webuploader`。在用之前，我們先來分析我們目前的上傳圖片形式！ ## 一、swfupload 我們在用 `ThinkCMF` 所用的圖片上傳方式是：`swfupload`。 它完全參照 `PHPCMS` 的上傳方式，甚至絕大多數的代碼都是參考 `PHPCMS` ！ 因此，嚴格意義上說，我認為它的代碼方式還是不太嚴謹！我們需要進一步地分析，以求更精進！！！ ### 1、大總結 在我們所用 `Newthink` 只需要兩句關鍵代碼就可以進行上傳！如下所示： ``` <input type="hidden" name="slide_pic" id="thumb" value=""> <a href="javascript:void(0);" onclick="flashupload('thumb_images', '附件上傳','thumb',thumb_images);return false;"></a> ``` 這兩句代碼，我們一般把 `flashupload` 中的`thumb` 這一句代碼修改為對應的名稱就可以用了！！！ 其他3個參數可以自定義！ > 需要說明的時：我把 flashupload 的8個參數精減為4個參數！但考慮之前使用的其他代碼，暫時其代碼不做整體修改！ ### 2、代碼 在“添加幻燈”頁面 `/admin/themes/simplebootx/Admin/Slide/add.html` ，我們可以看到如下關鍵部分代碼： 源代碼如下所示： ``` <input type="hidden" name="slide_pic" id="thumb" value=""> <a href="javascript:void(0);" onclick="flashupload('thumb_images', '附件上傳','thumb',thumb_images,'1,jpg|jpeg|gif|png|bmp,1,,,1','','','');return false;"> <img src="__TMPL__Public/assets/images/default-thumbnail.png" id="thumb_preview" width="135" style="cursor: hand" /> </a> <input type="button" class="btn btn-small" onclick="$('#thumb_preview').attr('src','__TMPL__Public/assets/images/default-thumbnail.png');$('#thumb').val('');return false;" value="取消圖片"> ``` ### 3、步驟 上邊的代碼有些多，我們逐一對其解析講解！ #### 步驟1、input 表單 `<input type="hidden" name="slide_pic" id="thumb" value="">`這句代碼是把幻燈的名稱`slide_pic`作為一個`input`隱形輸入框，將其賦值為`thumb` #### 步驟2、onclick 單擊事件 及8個參數（有用的僅為4個） `<a href="javascript:void(0);" onclick="flashupload('thumb_images', '附件上傳','thumb',thumb_images,'1,jpg|jpeg|gif|png|bmp,1,,,1','','','');return false;"></a>` 這句看似平淡無奇的代碼，卻是最關鍵的部分，為什么這么說呢，通過`javascript:void(0);`不讓這句代碼進行任何操作也就是說不進行超鏈接跳轉，通過 `onclick` 事件進行點擊進行圖片上傳的操作函數`flashupload()`，這一句是至關重要的！！下面我們著重來講一下它的使用及來源！ `flashupload` 這一個函數所在位置是在 `/public/js/content_addtop.js` 35行，關鍵代碼如下： ``` function flashupload(uploadid, name, textareaid, funcName, args, module, catid, authkey) ```  我們看到，它包含8個參數，那這8個參數有什么作用呢？下面我們一一說一下，它的作用！ **8個參數作用如下：** **a.`uploadid` 是這個彈出框的ID名稱。** 我們這里叫“thumb_images”（是我們自己起的名字），如圖所示：  **b.`name`這是我給這個彈出框起的名稱。** 我們這里叫“附件上傳”（是我們自己起的名字），如圖所示：  **c.`textareaid` 是最后數據返回插入的容器id。** 我們這里叫`thumb`（不是我們起的名字），那它是從哪里來的呢？就是第1步我們的隱藏框`<input type="hidden" name="slide_pic" id="thumb" value="">` 這里的`id`值`thumb`就是我們這里要填寫的`textareaid`的值，如圖所示：  **d.`funcName` 這是個回調函數（這個是我們已經定義好的函數）。** 剛開始接觸`js`的人，不清楚什么是回調函數，回調函數的意思也就是說：我上傳完圖片了，需要再執行什么函數。我們這里執行的是`thumb_images`，那么這個函數是干什么的呢？我們還可以在這個文件里查找到`/public/js/content_addtop.js`的164行，如下所示：  **問：那它有什么作用呢？** 答：它就是回調后進行預覽所用！也就是說：我剛才把圖片上傳了上去，怎么才能顯示到前端呢？需要預覽！預覽！這是其中關鍵的一步！！ **e.`args` 參數。** 我們這里定義的是 `'1,jpg|jpeg|gif|png|bmp,1,,,1'`，我最開始看時有些一頭霧水，很明顯 **6個參數** 用5個逗號隔開！那這6個參數是怎么來的呢？？？ 通過下邊的代碼，我們很容易猜出來！是`swfupload`所需要的一些參數！ `'index.php?a=swfupload&m=asset&g=asset' + args + setting`(這句代碼就有問題，應該是 g m a 的順序，不過這樣也能運行，習慣而已！) 那這6個參數是做什么用的呢？下邊我們一一講解！ 首先：swfupload在哪里，上邊的代碼已經告訴我們了，位置在 `newthink\application\Asset\Controller`，如下圖所示：   > 這6個參數有點兒亂，不知道該怎么說？后來才發現，它是完全參照 PHPCMS 的上傳方式！！因此這塊兒我們不做考慮！！ **f.module 所屬模塊** 其實沒用，可以去掉！完全抄 `PHPCMS`! **g.catid 欄目id** 其實沒用，可以去掉！完全抄 `PHPCMS`! **h.authkey 參數密鑰，驗證args** 其實沒用，可以去掉！完全抄 `PHPCMS`! #### 步驟3、默認圖片 ```<img src="__TMPL__Public/assets/images/default-thumbnail.png" id="thumb_preview" width="135" style="cursor: hand" />``` 這里默認圖片為  #### 步驟4、取消已上傳圖片恢復默認 `<input type="button" class="btn btn-small" onclick="$('#thumb_preview').attr('src','__TMPL__Public/assets/images/default-thumbnail.png');$('#thumb').val('');return false;" value="取消圖片">` 這里其實很簡單，有兩步操作 一是:通過 `attr` 恢復默認顯示 二是:將隱藏輸入框用 `val` 賦為空值！  ## 二、WebUploader 暫時沒有！