ajax上传.doc

上传概述
上传类使用ORG类库包中的Net.UpdateFile类，ThinkPHP内置的Action操作里面（主要是insert和update操作，其他操作可以相应实现）实现了自动识别是否存在文件上传，如果存在会自动进行处理。
而上传类要做的仅仅是文件上传的过程，其他功能需要依赖系统类库或者相应类库。系统对文件上传设置了很多灵活的参数以便进行更细致的控制。下面我们通过几种常用的例子分别来描述下如何使用UploadFile类。目前ThinkPHP0.9.5版本的上传类包含的功能如下（有些功能需要结合ThinkPHP系统其他类库）：
1、基本上传功能
2、批量上传
3、Ajax方式上传
4、自动生成图片缩略图
5、自定义参数上传

基本上传功能
基本上，在ThinkPHP中简单的上传功能无需进行特别处理，而全部有内置操作实现了。要做的仅仅是在表单中添加文件上传框和设置enctype="multipart/form-data"属性即可。当然，这和框架的架构和数据结构有关，因为ThinkPHP的上传数据表是单独的，上传文件数据表中有两个关键的用于记录对应数据的字段：module和recordId，其实module也就是某个数据表，而recordId也就是该数据表对应的数据ID。在其他任何需要上传的数据表中可以方便地查询到属于自己的附件列表，就是采用这种机制和结构，令得ThinkPHP的上传变得简化了。
下面就是实现代码：
1. <form METHOD=POST action="__URL__/action/" enctype="multipart/form-data" >
2. <INPUT TYPE="text" NAME="name" > INPUT TYPE="text" NAME="email" >
3. <INPUT TYPE="file" name="photo" > INPUT TYPE="submit" value="保 存" >
4. </form>
复制代码

上面的表单，在保存用户数据的同时包括了一个照片文件上传，使用普通方式提交到后台后，系统自动会把用户数据保存在用户数据表中，而把上传的文件保存到附件数据表，并记录了对应的用户数据表的名称和编号。下次取得数据的时候，使用下面的方式获取属于该记录的附件列表：
1. //读取附件信息
2. $attachDao = D('AttachDao');
3. $attachs = $attachDao->findAll("module='User' and recordId='$id'");
4. //模板变量赋值
5. $this->assign("attach",$attachs);
复制代码

批量上传
ThinkPHP上传类支持多文件上传，而这些仅仅是在客户端增加多个文件上传框而已，后台会自动获取所有的文件上传，并一一进行上传和保存数据操作，并且过滤无效的上传。批量上传的一个例子：
假设用户往自己的图片库里面添加多个图片
1. <form METHOD=POST action="__URL__/action/" enctype="multipart/form-data" >
2. <INPUT TYPE="file" name="photo1" > INPUT TYPE="file" name="photo2" >
3. <INPUT TYPE="file" name="photo3" > INPUT TYPE="submit" value="上传图片" >
4. </form>
复制代码
需要注意，UploadFile上传类对多文件上传并不是采用
<INPUT TYPE="file" name="photo[]" >
方式，注意区别两种方式的不同。
上传文件的个数并无限制，ThinkPHP管理后台还实现了一个动态增加文件上传的功能。通过该方式可以方便地进行多文件批量上传。

Ajax文件上传
通过简单的参数设置就可以把文件上传改装成AJAX方式（Iframe实现方式），而你要做的仅仅是添加下面代码：
1. <iframe name="ajaxUpload" src="" frameborder="0" SCROLLING="no" style="display:none"></iframe>
2. <INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1">
3. < INPUT TYPE="hidden" name="_uploadFormId" value="upload">
4. <INPUT TYPE="hidden" name="_uploadFileResult" value="result">
5. < INPUT TYPE="hidden" name="_uploadResponse" value="uploadComplete">
复制代码

_uploadFormId用于设置上传表单id，用于在上传成功后重置表单，避免重复上传。在_uploadFileResult变量中设置返回提示的层id，在_uploadResponse参数中设置文件上传返回数据的处理方法。该方法返回两个参数：id和name，如果有多文件上传，使用逗号分割多个返回值。ThinkPHP框架的Action类中的ajaxUploadResult方法对Ajax文件上传的信息返回提供支持。
例如，第一个例子上传后希望更新照片，使用下面的方法定义：
1. function uploadComplete(id,name){
2.            $('photo').innerHTML = '<IMG SRC="__PUBLIC__/Images/user/' + name + '" class="shadow" BORDER="0" ALT="" align="left">';
3. }
复制代码

下面的示例是AJAX文件上传的实现画面，左边图片会上传成功后自动更新。

自动生成缩略图
如果希望在上传过程自动为图片文件生成缩略图，ThinkPHP的UploadFile类也可以轻松实现，而且不需要你多特殊添加缩略图处理代码。要做的也仅仅是在客户端添加如下参数：
1. // 设置是否需要生成图片缩略图，仅对图片上传有效
2. <INPUT TYPE="hidden" name="_uploadImgThumb" value="1"> // 生成缩略图的最大宽度
3. <INPUT TYPE="hidden" name="_uploadThumbMaxWidth" value="45"> // 生成缩略图的最大高度
4. <INPUT TYPE="hidden" name="_uploadThumbMaxHeight" value="45">
复制代码

设置后系统在上传后会自动生成相同格式的缩略图。系统默认的缩略图路径是上传文件所在目录，并且在文件中后面添加_thumb以标识缩略图文件。缩略图路径可以在项目配置文件中配置。

生成多缩略图
ThinkPHP支持对上传的图片生成多缩略图，TOPThink社区的头像功能就是多缩略图功能的例子，使用起来也非常简单。下面的代码是TOPThink社区上传头像的部分缩略图代码：
1. <INPUT TYPE="hidden" name="_uploadImgThumb" value="1">
2. <INPUT TYPE="hidden" name="_uploadThumbSuffix" value="_big,_small,_min">
3. <INPUT TYPE="hidden" name="_uploadThumbMaxWidth" value="75,32,16">
4. <INPUT TYPE="hidden" name="_uploadThumbMaxHeight" value="75,32,16">
复制代码

上面的例子表示生成三个大小的缩略图，并规定了缩略图文件名后面添加的后缀，和三种缩略图的宽高尺寸。

更多上传设置
ThinkPHP在Action来中还提供了和UploadFile类的上传设置接口，方便在客户端进行更多的参数设置进行上传控制。
下面列举下主要的参数，更多的参数可以参考框架的Action类中的_upload方法。
1. // 设置覆盖方式上传
2. <INPUT TYPE="hidden" name="_uploadReplace" value="1"> // 设置允许上传文件类型
3. <INPUT TYPE="hidden" name="_uploadFileType" value="jpg,gif,png,swf" > // 上传文件保存目录，要注意设置可写权限
4. <INPUT TYPE="hidden" name="_uploadSavePath" value="/Public/Images/user/" > // 上传文件名命名规则，支持函数，例如time uniqid com_create_guid 系统默认设置为uniqid保证上传文件名不会重复，如果不存在设置函数，则使用规则字符串作为上传文件名
5. <INPUT TYPE="hidden" name="_uploadSaveRule" value="time"> // 设置上传文件大小
6. <INPUT TYPE="hidden" name="_uploadFileSize" value="20480" > // 设置上传数据表，默认的上传数据记录在当前模块表中 <INPUT TYPE="hidden" name="_uploadFileTable" value="user"> // 设置上传文件对应的数据编号，通常不用设置，除非特别需要
7. <INPUT TYPE="hidden" name="_uploadRecordId" value=""> // 设置上传用户id，通常不用设置，系统自动获取当前登录用户编号
8. <INPUT TYPE="hidden" name="_uploadUserId" value="{$user.id}">
复制代码

ThinkPHP对Ajax完全支持
ThinkPHP完全支持Ajax，并且还内置了一个SmartAjax和ThinkAjax类库，你可以不通过任何其他Ajax类库包就可以在ThinkPHP中使用Ajax支持。
首先说一下ThinkPHP的JS类库以及如何在ThinkPHP中引入Js类库

JS类库
ThinkPHP框架自带了一个易于扩展的JS类库，并且通过标签库技术和JS方法轻松导入。
JS类库的引入给ThinkPHP的发展和企业级应用开启了新的一面，同时也给基于ThinkPHP的应用开发定义了一个相对简单的JS导入规范。这个规范类似于ThinkPHP基类库的命名空间导入方式，并且该规范同样可以适用于CSS文件的导入。下面先看个例子：
基于标签库技术的JS类库引入方法
1. <html:import type='js' file='Js.Base' />
2. <html:import file='Js.Util.Calendar' />

使用html:import标签 可以引入所需要的JS文件，如果没有指定type，则默认为js，import的根目录可以设定，也可以通过basepath参数指定。以上的标签就表示导入 Js/Base.js、 Js/Util/Calendar.js、 ../public/Js/common.js。
这种方式的Js导入是显式的，除了以上标签库形式的导入，ThinkPHP还支持隐式的JS方法导入JS文件。
在Base.js文件中定义了_import方法，可以起到和html:import标签类似的功能，例如：
1. <SCRIPT LANGUAGE='JavaScript'>
2. <!--
3. ImportBasePath = 'http://localhost/public/';
4. _import('Js.Form.CheckForm');
5. //-->
6. </SCRIPT>

要使用_import方法在Js文件中隐式导入所需的JS类库，前提是必须加载Base.js文件和设定ImportBasePath 参数（即导入根目录），并且该方法只能导入JS文件。
除此之外，ThinkPHP提供的JS类库还提供了基于文件名方式导入JS和CSS的方法：ImportJS和ImportCss。
ThinkPHP框架目前的JS类库还比较有限，但是开发人员可以很方便的扩充自己的JS类库，并且随着ThinkPHP的不断完善，也一定会提供更加丰富的JS类库。
目前提供的类库有：
1. Base.js JS基础文件
2. String目录 字符串操作扩充类
3. Util目录 工具类库
4. Form目录 表单操作类库

SmartAjax和ThinkAjax
SmartAjax 是一个Ajax类库，纯JS解决方案，参考了CoreAjax的某些功能实现，支持HTML元素和事件绑定Ajax操作、表单提交，并可以定时执行，支持更新效果。 ThinkAjax和ThinkPHP结合，在返回数据格式上面专门针对ThinkPHP作了处理，其他用法和SmartAjax类似。

主要属性：
updateTip //更新提示信息，支持HTML method //提交方法POST 或者GET effect //更新效果，采用mootools类库，例如 {”font-size”:[0,25],”opacity”: [1,0.3]} 主要方法：
// 发送Ajax请求
send(提交URL,提交参数,结果显示DIV对象或者ID,更新显示效果,定时执行时间间隔)

// 发送表单Ajax操作
sendForm(表单对象或者ID,提交URL,结果显示DIV对象或者ID,更新显示效果)

// 绑定Ajax操作到HTML元素和事件
bind(源HTML元素或者ID,绑定事件,提交URL,提交参数,结果显示DIV对象或者ID,更新效果)

// 页面加载时候进行Ajax操作
load(提交URL,提交参数,结果显示DIV对象或者ID,更新效果)

// 定时执行Ajax操作
repeat(提交URL,提交参数,结果显示DIV对象或者ID,执行间隔,更新效果)

使用举例：
1. // 加载需要的类库
2. <script language='JavaScript'  src='/Js/prototype.js'></script>
3. <script language='JavaScript' src='/Js/mootools.js'></script>
4. <script language='JavaScript' src='/Js/SmartAjax.js'></script> SmartAjax.updateTip = "更新中～";
5. SmartAjax.effect = {'font-size':[0,30],'opacity': [1,0.3]};
6. // 页面加载时执行通过Ajax操作在后台执行load.php
7. SmartAjax.load('http://localhost/load.php',"name=thinkphp","result");
8.
9. // 绑定click操作到id为run的html元素，执行Ajax
10. SmartAjax.bind('run','click','http://localhost/hello.php',"name=thinkphp","result");
11.
12. // 每隔1秒种执行time.php，输出
13. SmartAjax.repeat('http://localhost/time.php',"",$('timer'),1000);
14.
15. // Ajax方式提交表单数据
16. SmartAjax.sendForm('login', APP+'/User/checkLogin/','result',doLogin);

Ajax文件上传
ThinkPHP框架内置了对Ajax文件上传(非真正Ajax）的实现。采用的是iframe的方式对文件上传进行支持。结合ThinkPHP的文件上传类，可以很方便地进行文件上传和批量上传。下面是一个典型的文件上传示例代码：
1. <form id="upload" METHOD=POST action="__APP__/Attach/insert/" enctype="multipart/form-data" target="iframeUpload">
2. <INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1">
3. <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:none"></iframe>
4. <INPUT TYPE="hidden" name="_uploadFileResult" value="result">
5. <INPUT TYPE="hidden" name="_uploadFileType" value="jpg,gif,png" >
6. <INPUT TYPE="hidden" name="_uploadSaveRule" value="{$user.id}">
7. <INPUT TYPE="hidden" name="_uploadFormId" value="upload">
8. <INPUT TYPE="hidden" name="_uploadFileSize" value="20480" >
9. <INPUT TYPE="hidden" name="_uploadResponse" value="uploadComplete">
10. <INPUT TYPE="file" name="file">
11. <INPUT TYPE="submit" value="上传" >
12. </form>

上传完成后，ThinkPHP系统会在iframe里面返回js代码和数据，并根据自定义的方法更新页面的result标签。更多关于文件上传方面的掌握请看 文件上传类的使用教程

后端Ajax数据返回
SmartAjax是一个独立的前端JS类库，其运行并不需要后台支持。不过，在后台处理和数据返回方面，结合ThinkPHP框架提供的一些完善处理，能够使得后台的开发效率提高。首先，在页面使用Ajax方式提交的时候使用_AJAX_SUBMIT_隐藏变量或者ajax变量，后台能够自动识别该操作为Ajax操作，并作出相应的处理。例如，表单提交Ajax方式，在form中添加 <INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1">
如果使用SmartAjax.send方法提交操作，直接在参数里面添加ajax变量
1. SmartAjax.send('url','ajax=1&name=thinkphp','result);

在后台Action类处理完毕后，简单使用：
ajaxReturn($data,$info,$status) 来返回数据到客户端，其中
$data 表示需要返回客户端的数据，可以是字符串、数组或者对象（经过JSON_ENCODE编码，可以被js直接使用）
$info 表示提示信息（例如操作成功、失败等）
$status 表示操作状态码（1表示成功 0 表示失败 可以由应用自己定义，客户端作相应处理就可以了）
通常的方式我们需要使用echo或者exit来输出数据，并且还需要设置utf8编码，最麻烦的是还要自己进行json编码，使用AjaxReturn方法，一切都内置处理了。并且，另外一个方便之处是，不仅仅可以返回数据，还可以返回操作状态（例如操作失败还是成功）以及相关提示信息。 ThinkPHP对于JSON的处理已经作了兼容处理，无论是PHP4还是PHP5都可以直接使用JSON_ENCODE方法来对PHP对象、数组或者字符串等类型直接编码成JSON数据返回给客户端由JS处理。

为了更好的获取ThinkPHP后台Action的ajaxReturn方法返回的信息，框架JS类库中增加了一个ThinkAjax类库为后台ajax信息返回提供完全支持。 ThinkAjax类的使用和SmartAjax基本类似，只是简化了操作，只需要在客户端定义接受数据的处理方法，其他的由ThinkAjax类库自动处理了，包括信息提示。一个ThinkAjax的使用例子：
1. ThinkAjax.sendForm('formId','__URL__/action/',complete);
2. function complete(data,status,info){
3. // 获取返回数据，并进行处理
4. // 在这里对data进行处理操作
5. }