HTML5程序设计基础教程第9章.ppt

uploadFile ()函数的代码 function uploadFile() { var fd = new FormData(); fd.append(fileToUpload, document.getElementById(fileToUpload).files[0]); var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject(Microsoft.XMLHTTP); } xhr.upload.addEventListener(progress, uploadProgress, false); xhr.addEventListener(load, uploadComplete, false); xhr.addEventListener(error, uploadFailed, false); xhr.addEventListener(abort, uploadCanceled, false); xhr.open(POST, upfile.php); xhr.send(fd); } （1）progress事件 function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById(divprogress).innerHTML = percentComplete.toString() + %; document.getElementById(progress).value = percentComplete; } else { document.getElementById(divprogress).innerHTML = unable to compute; } } （2）load事件 load事件的处理函数为uploadComplete ()，代码如下： function uploadComplete(evt) { document.write(evt.target.responseText) } （3）abort事件 abort事件的处理函数为uploadCanceled()，代码如下： function uploadCanceled(evt) { alert(上传过程被取消。); } （4）error事件 error事件的处理函数为uploadFailed ()，代码如下： function uploadFailed(evt) { alert(上传过程中出现错误。); } 2．服务器端处理上传文件的脚本设计 可以使用$_FILES[fileToUpload]来访问此上传文件的信息。$_FILES[fileToUpload]也是一个数组，数组元素是上传文件的各种属性，具体说明如下： ? $_FILES[fileToUpload][Name]，客户端上传文件的名称。 ? $_FILES[fileToUpload][type]，文件的MIME类型，需要浏览器提供对此类型的支持，例如image/gif等。 ? $_FILES[fileToUpload][size]，已上传文件的大小，单位是字节。 ? $_FILES[fileToUpload][tmp_name]，文件被上传后，在服务器端保存的临时文件名。 ? $_FILES[fileToUpload][error] 上传文件过程中出现的错误号，错误号是一个整数。 服务器端脚本upfile.php的代码 ?PHP // 检查上传文件的目录 $upload_dir = getcwd() . \\upload\\; $newfile = $upload_dir . $_FILES[fileToUpload][name]; // 如果目录不存在，则创建 if(!is_dir($upload_dir)) mkdir($upload_dir); if(file_exists($_FILES[fileToUpload][tmp_name])) { move_uploaded_file($_FILES[fileToUpload][tmp_name], $newfile); }