[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 暂时没有！