《HTML5与Ajax强强联手 演绎文件上传》.doc

在本文中，将介绍如何利用Ajax及HTML5异步将文件上传到服务端。 　　上传表单页面的设置 　　先来看下上传表单页面的设置，代码如下： form id=upload?action=upload.php?method=POST?enctype=multipart/form-datafieldsetlegendHTML File Upload/legendinput type=hidden?id=MAX_FILE_SIZE?name=MAX_FILE_SIZE爒alue=300000?div牋牋label爁or=fileselectFiles爐o爑pload:/label牋牋input type=file爄d=fileselect爊ame=fileselect[]爉ultiple=multiple?牋牋div id=filedragor燿rop files here/div/divdiv id=submitbutton牋牋button type=submitUpload Files/button/div/fieldset/form 　　这里，我们为表单的提交设置为upload.php，用来处理上传的文件，在表单中并且规定了上传的图片的大小不超过300K。 　　上传的Javascript 　　在对文件进行上传处理的Javascript中，代码如下： //?file selectionfunction?FileSelectHandler(e) {????//?cancel event and hover styling????FileDragHover(e);????//?fetch FileList object????var?files?=?e.target.files?||?e.dataTransfer.files;????//?process all File objects????for?(var?i?=?0, f; f?=?files[i]; i++) {????????ParseFile(f);????????UploadFile(f);????}} 　　在上个教程中，已经对ParseFile(f)进行了介绍，现在着重看下UploadFile这个方法的代码，代码如下： function?UploadFile(file) {　　var xhr?=?new?XMLHttpRequest();　　if?(xhr.upload??file.type?==?image/jpeg??file.size?=?$id(MAX_FILE_SIZE).value) {　　//?start upload　　xhr.open(POST, $id(upload).action,?true);　　xhr.setRequestHeader(X_FILENAME, );　　xhr.send(file);　　}　　} 　　在上面的代码中，使用了目前只有在FireFox和Chrome中才支持的XmlHttpRequest2对象，XmlHttpRequest2是对原先大家熟悉的xmlhttprequest的加强，目前还没最后定案，可以参考/2006/webapi/XMLHttpRequest-2/的描述。在上面的代码中，首先是判断了上传文件的类型是否为图片文件以及大小是否符合要求，如果符合要求的话，则调用send方法发送文件到服务端，并且这里设置了HTTP文件头X_FILENAME为上传的文件名。 　　在PHP服务端的代码中，首先通过HTTP头来判断是否通过AJAX上传还是普通的表单上传。 　$fn?=?(isset($_SERVER[HTTP_X_FILENAME])???$_SERVER[HTTP_X_FILENAME] :?false);　　if?($fn) {　　//?AJAX调用　　file_put_contents(　　uploads/?. $fn,　　file_get_contents(php://input)　　);　　echo?$fn uploaded;　　exit();　　} 　　如果$fn中设置了值，则调用使用file_put_contents方法，将文件复制到uploads文件夹，而如果是通过普通表单的上传，则作如下判断： 　else?{　　$files?=?$_FILES[fileselect];　　foreach ($files[error] as $id = $err) {　　if?($err?==?UPLOAD_ERR_OK) {　　$fn?=?$files