设为首页 |收藏本站 |论坛搜索
登录 注册 找回密码

站长论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

全国各地医院查询重量转换换算RGB颜色查询交通标志大全各类快递查询
简体繁体转换黄金价格实时走势万年历查询实时汇率转换列车时刻查询
在线翻译工具CSS中文手册HTML学习教程MySQL中文手册JavaScript中文手册
PHP安全基础手册PHP5面向对象编程教程正则表达式系统教程SQL Server精华Apache 2.2 中文手册
DOS命令全集指南windows脚本技术中文版股票行情查询历史上的今天邮编区号查询
长度转换换算货币汇率转换常用电话号码体育彩票查询手机位置查询
域名Whois信息查询谷歌PR值查询台州网站建设台州网站开发台州域名注册
天气预报查询长度转换换算器在线电子地图车牌号码查询中国百家姓查询
返回列表 ...发表新帖
查看: 4895|回复: 0
打印 上一主题 下一主题

基于PHP的AJAX技术实现文件异步上传

[复制链接]
跳转到指定楼层
1#
发表于 2007-10-4 20:11:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
台州网址导航
异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到，必须解决的问题。但是标准的AJAX类（XmlHttpRequest）无法实现传输文件的功能。因此，这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传功能。在这个功能当中需要使用到内置的框及（IFRAME）来传输文件。这个功能实现的效果是页面在上传文件的时候，用户还可以使用该页面并且填写文件描述。

　　这个例子是我们引用AJAX的经典案例进行分析的。

　　系统环境

　　? 较新版本的浏览器。例如Opera，Firefox或者 Internet Explorer。

　　? PHP 4.3.0 或更高版本

　　? PHP 5 版本

　　? PHP 中的 'short_open_tag' 选项开启(否则会发生解析错误)。

　　功能分析

　　通过内置的IFRAME（框架）进行文件上传。具备包括三个部分组成。

　　? 在页面中间有一个简单的＜form...表单，表单只包含了＜input type="file" ... ＞控件。这个表单的目标链接就是一个隐藏得IFRAME(通过 CSS的风格" display: none;"实现)并且表单里面唯一一个控件的OnChange事件用来触发JavaScript函数。这个函数的作用是检查用户提交的扩展名，然后提交表单。

　　? 在服务器端用PHP编写了一个处理过程（用FILEFRAME坐注释了）。这个处理过程用来把从客户端上传的文件进行检查后保存在服务器，并且通过Javascript代码的形式返回给用户。返回给用户的Javascript脚本通过"parent.window.document"更改了用户现在正在查看的页面，设置了文件的名称并启用了让用户提交表单的按钮。启用按钮的操作是通过getElementById函数实现的。

　　? 在主页面还有一个表单，它包含了用户提交的描述和隐藏的文件名。用户可以在文件上传的同时填写文件的描述。当文件上传结束以后，用户点击按钮，就可以看上传以后返回给用户的文件信息了。（通过返回来的文件名和用户输入的描述构成文件信息）。

　　可能你会说这么操作不符合常理：文件在用户确认之前就已经被提交了。如果用户没有提交的话，情况会如何呢。你可以自己在扩展处理被用户放弃的文件。

　　这个例子把文件存储在一个文件系统的目录下。你需要在脚本开始运行的时候配置下这个目录，具体的包含这个目录信息的变量是$upload_dir 和$web_upload_dir。这里有一个对目录是否可写的权限检查。

　　这里我们用到了以下几个PHP函数：

　　? move_uploaded_file - 转移一经上传到服务器的文件

　　? fopen - 打开文件

　　? fwrite - 把内容写入文件

　　? fclose - 关闭文件

　　? str_replace - 替换字符串

　　? filesize - 返回文件大小

　　? filemtime - 返回处理时间

　　你可以通过手册查到这些函数如果使用。请注意要把HTM(＜, ＞, &)标记替换为(<, > 和 &).

源代码
  1. ＜?php
  2. $upload_dir = "/var/www/anyexample/aeu"; // 文件存储的路径
  3. $web_upload_dir = "/aeu"; // 文件在Web目录下的路径
  4. $tf = $upload_dir.'/'.md5(rand()).".test";
  5. $f = @fopen($tf, "w");
  6. if ($f == false)
  7. die("Fatal error! {$upload_dir} is not writable. Set 'chmod 777 {$upload_dir}'
  8. or something like this");
  9. fclose($f);
  10. unlink($tf);

  12. //处理上传的文件
  13. if (isset($_POST['fileframe']))
  14. {
  15. 　$result = 'ERROR';
  16. 　$result_msg = 'No FILE field found';

  18. 　if (isset($_FILES['file'])) // 从浏览器接受文件
  19. 　{
  20. 　　if ($_FILES['file']['error'] == UPLOAD_ERR_OK) // 没有错误
  21. 　　{
  22. 　　　$filename = $_FILES['file']['name']; // 文件名
  23. 　　　move_uploaded_file($_FILES['file']['tmp_name'], $upload_dir.'/'.$filename);
  24. 　　　// 处理的主过程-转移文件到 $upload_dir
  25. 　　　$result = 'OK';
  26. 　　}
  27. 　　elseif ($_FILES['file']['error'] == UPLOAD_ERR_INI_SIZE)
  28. 　　　$result_msg = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
  29. 　　else
  30. 　　　$result_msg = 'Unknown error';
  31. 　}

  33. 　echo '＜html＞＜head＞＜title＞-＜/title＞＜/head＞＜body＞';
  34. 　echo '＜script language="JavaScript" type="text/javascript"＞'."\n";
  35. 　echo 'var parDoc = window.parent.document;';
  36. 　'
  37. 　if ($result == 'OK')
  38. 　{
  39. 　　echo 'parDoc.getElementById("upload_status").value = "file successfully uploaded";';
  40. 　　echo 'parDoc.getElementById("filename").value = "'.$filename.'";';
  41. 　　echo 'parDoc.getElementById("filenamei").value = "'.$filename.'";';
  42. 　　echo 'parDoc.getElementById("upload_button").disabled = false;';
  43. 　}
  44. 　else
  45. 　{
  46. 　　echo 'parDoc.getElementById("upload_status").value = "ERROR: '.$result_msg.'";';
  47. 　}

  49. 　echo "\n".'＜/script＞＜/body＞＜/html＞';
  50. 　exit();
  51. }

  53. function safehtml($s)
  54. {
  55. 　$s=str_replace("&", "&", $s);
  56. 　$s=str_replace("＜", "<", $s);
  57. 　$s=str_replace("＞", ">", $s);
  58. 　$s=str_replace("'", "'", $s);
  59. 　$s=str_replace("\"", """, $s);
  60. 　return $s;
  61. }

  63. if (isset($_POST['description']))
  64. {
  65. 　$filename = $_POST['filename'];
  66. 　$size = filesize($upload_dir.'/'.$filename);
  67. 　$date = date('r', filemtime($upload_dir.'/'.$filename));
  68. 　$description = safehtml($_POST['description']);

  70. 　$html =＜＜＜END
  71. 　＜html＞＜head＞＜title＞{$filename} [uploaded by IFRAME Async file uploader]＜/title＞＜/head＞
  72. 　＜body＞
  73. 　　＜h1＞{$filename}＜/h1＞
  74. 　　＜p＞This is a file information page for your uploaded file. Bookmark it, or send to anyone...＜/p＞
  75. 　　＜p＞Date: {$date}＜/p＞
  76. 　　＜p＞Size: {$size} bytes＜/p＞
  77. 　　＜p＞Description:
  78. 　　＜pre＞{$description}＜/pre＞
  79. 　　＜/p＞
  80. 　　＜p＞＜a href="{$web_upload_dir}/{$filename}" style="font-size: large;"＞download file＜/a＞＜br＞
  81. 　　＜a href="{$PHP_SELF}" style="font-size: small;"＞back to file uploading＜/a＞＜br＞
  82. 　　＜a href="{$web_upload_dir}/upload-log.html" style="font-size: small;"＞upload-log＜/a＞＜/p＞
  83. 　　＜br＞＜br＞Example by ＜a href="http://www.anyexample.com/"＞AnyExample＜/a＞
  84. 　＜/body＞＜/html＞
  85. 　END;
  86. 　
  87. 　$f = fopen($upload_dir.'/'.$filename.'-desc.html', "w");
  88. 　fwrite($f, $html);
  89. 　fclose($f);
  90. 　$msg = "File {$filename} uploaded,
  91. 　＜a href='{$web_upload_dir}/{$filename}-desc.html'＞see file information page＜/a＞";

  93. 　$f = fopen($upload_dir."/upload-log.html", "a");
  94. 　fwrite($f, "＜p＞$msg＜/p＞\n");
  95. 　fclose($f);

  97. 　setcookie('msg', $msg);
  98. 　header("Location: http://".$_SERVER['HTTP_HOST'].$PHP_SELF);
  99. 　exit();
  100. }

  102. if (isset($_COOKIE['msg']) && $_COOKIE['msg'] != '')
  103. {
  104. 　if (get_magic_quotes_gpc())
  105. 　　$msg = stripslashes($_COOKIE['msg']);
  106. 　else
  107. 　　$msg = $_COOKIE['msg'];
  108. 　　setcookie('msg', '');
  109. }
  110. ?＞
  111. ＜!-- Beginning of main page --＞
  112. ＜html＞＜head＞
  113. ＜title＞IFRAME Async file uploader example＜/title＞
  114. ＜/head＞
  115. ＜body＞
  116. ＜?php
  117. 　if (isset($msg))
  118. 　　echo '＜p style="font-weight: bold;"＞'.$msg.'＜/p＞';
  119. ?＞
  120. ＜h1＞Upload file:＜/h1＞
  121. ＜p＞File will begin to upload just after selection. ＜/p＞
  122. ＜p＞You may write file description, while you file is being uploaded.＜/p＞

  124. ＜form action="＜?=$PHP_SELF?＞" target="upload_iframe" method="post" enctype="multipart/form-data"＞
  125. 　＜input type="hidden" name="fileframe" value="true"＞
  126. 　＜!-- Target of the form is set to hidden iframe --＞
  127. 　＜!-- From will send its post data to fileframe section of this PHP script (see above) --＞

  129. 　＜label for="file"＞text file uploader:＜/label＞＜br＞
  130. 　＜!-- JavaScript is called by OnChange attribute --＞
  131. 　＜input type="file" name="file" id="file" onChange="jsUpload(this)"＞
  132. ＜/form＞
  133. ＜script type="text/javascript"＞
  134. /* This function is called when user selects file in file dialog */
  135. function jsUpload(upload_field)
  136. {
  137. 　// this is just an example of checking file extensions
  138. 　// if you do not need extension checking, remove
  139. 　// everything down to line
  140. 　// upload_field.form.submit();
  141. 　
  142. 　var re_text = /\.txt|\.xml|\.zip/i;
  143. 　var filename = upload_field.value;

  145. 　/* Checking file type */
  146. 　if (filename.search(re_text) == -1)
  147. 　{
  148. 　　alert("File does not have text(txt, xml, zip) extension");
  149. 　　upload_field.form.reset();
  150. 　　return false;
  151. 　}

  153. 　upload_field.form.submit();
  154. 　document.getElementById('upload_status').value = "uploading file...";
  155. 　upload_field.disabled = true;
  156. 　return true;
  157. }
  158. ＜/script＞
  159. ＜iframe name="upload_iframe" style="width: 400px; height: 100px; display: none;"＞
  160. ＜/iframe＞
  161. ＜!-- For debugging purposes, it's often useful to remove
  162. "display: none" from style="" attribute --＞

  164. ＜br＞
  165. Upload status:＜br＞
  166. ＜input type="text" name="upload_status" id="upload_status"
  167. value="not uploaded" size="64" disabled＞
  168. ＜br＞＜br＞

  170. File name:＜br＞
  171. ＜input type="text" name="filenamei" id="filenamei" value="none" disabled＞

  173. ＜form action="＜?=$PHP_SELF?＞" method="POST"＞
  174. 　＜!-- one field is "disabled" for displaying-only. Other, hidden one is for sending data --＞
  175. 　＜input type="hidden" name="filename" id="filename"＞
  176. 　＜br＞＜br＞

  178. 　＜label for="photo"＞File description:＜/label＞＜br＞
  179. 　＜textarea rows="5" cols="50" name="description"＞＜/textarea＞

  181. 　＜br＞＜br＞
  182. 　＜input type="submit" id="upload_button" value="save file" disabled＞
  183. ＜/form＞
  184. ＜br＞＜br＞
  185. ＜a href="＜?=$web_upload_dir?＞/upload-log.html"＞upload-log＜/a＞
  186. ＜br＞＜br＞＜br＞

  188. Example by ＜a href="http://www.anyexample.com/"＞AnyExample＜/a＞
  189. ＜/body＞
  190. ＜/html＞
复制代码
　以上的讲解就是提供一种思路供大家参考。大家也可以根据自己的需求进行相应的优化。
AJAX, Firefox, PHP, 文件, 异步
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖

相关帖子

台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州朗动科技(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事：政企网站,系统平台,微信公众号,各类小程序,手机APP客户端,浙里办微应用,浙政钉微应用、主机域名、虚拟空间、后期维护等服务，满足不同企业公司的需求，是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2026 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

快速回复 返回顶部 返回列表