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

1、基于PHP的AJAX技术实现文件异步上传本文关键词： php AJAX 异步上传 异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到，必须解决的问题。但是标准的AJAX类（XmlHttpRequest）无法实现传输 文件的功能。因此，这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传功能。在这个功能当中需要使用到内置的框及（IFRAME）来传 输文件。这个功能实现的效果是页面在上传文件的时候，用户还可以使用该页面并且填写文件描述。 这个例子是我们引用AJAX的经典案例进行分析的。系统环境· 较新版本的浏览器。例如Opera，Firefox或者 Intern

2、et Explorer。 · PH 或更高版本 · PHP 5 版本· PHP 中的 'short_open_tag' 选项开启(否则会发生解析错误)。功能分析通过内置的IFRAME（框架）进行文件上传。具备包括三个部分组成。 · 在页面中间有一个简单的form.表单，表单只包含了input type="file" . 控件。这个表单的目标链接就是一个隐藏得IFRAME(通过 CSS的风格" display: none;"实现)并且表单里面唯一一个控件的OnChange事件用来触发JavaScrip

3、t函数。这个函数的作用是检查用户提交的扩展名，然后提交 表单。 · 在服务器?php$upload_dir = "/var/www/anyexample/aeu" / 文件存储的路径$web_upload_dir = "/aeu" / 文件在Web目录下的路径$tf = $upload_dir.'/'.md5(rand().".test"$f = fopen($tf, "w");if ($f = false) die("Fatal error! is not writable.

4、Set 'chmod 777 'or something like this");fclose($f);unlink($tf);/处理上传的文件if (isset($_POST'fileframe') $result = 'ERROR'$result_msg = 'No FILE field found'if (isset($_FILES'file') / 从浏览器接受文件if ($_FILES'file''error' = UPLOAD_ERR_OK) / 没有错误$fi

5、lename = $_FILES'file''name' / 文件名 move_uploaded_file($_FILES'file''tmp_name', $upload_dir.'/'.$filename);/ 处理的主过程-转移文件到 $upload_dir $result = 'OK'elseif ($_FILES'file''error' = UPLOAD_ERR_INI_SIZE)$result_msg = 'The uploaded file e

6、xceeds the upload_max_filesize directive in php.ini'else $result_msg = 'Unknown error'echo 'htmlheadtitle-/title/headbody'echo 'script language="JavaScript" type="text/javascript"'."n"echo 'var parDoc = window.parent.document;''if

7、 ($result = 'OK')echo 'parDoc.getElementById("upload_status").value = "file successfully uploaded"'echo 'parDoc.getElementById("filename").value = "'.$filename.'"'echo 'parDoc.getElementById("filenamei").value = &q

8、uot;'.$filename.'"'echo 'parDoc.getElementById("upload_button").disabled = false;'elseecho 'parDoc.getElementById("upload_status").value = "ERROR: '.$result_msg.'"'echo "n".'/script/body/html'exit();function saf

9、ehtml($s)$s=str_replace("&", "&", $s);$s=str_replace("", "<", $s);$s=str_replace("", ">", $s);$s=str_replace("'", "'", $s);$s=str_replace(""", """,

10、 $s);return $s;if (isset($_POST'description')$filename = $_POST'filename'$size = filesize($upload_dir.'/'.$filename);$date = date('r', filemtime($upload_dir.'/'.$filename);$description = safehtml($_POST'description');$html =ENDhtmlheadtitle uploaded by

11、 IFRAME Async file uploader/title/headbodyh1/h1pThis is a file information page for your uploaded file. Bookmark it, or send to anyone./ppDate: /ppSize: bytes/ppDescription: pre/pre/ppa href="/" style="font-size: large;"download file/abra href="" style="font-size:

12、small;"back to file uploading/abra href="/upload-log.html" style="font-size: small;"upload-log/a/pbrbrExample by a href="/body/htmlEND;$f = fopen($upload_dir.'/'.$filename.'-desc.html', "w");fwrite($f, $html);fclose($f);$msg = "File upload

13、ed, a href='/-desc.html'see file information page/a"$f = fopen($upload_dir."/upload-log.html", "a");fwrite($f, "p$msg/pn");fclose($f);setcookie('msg', $msg); header("Location: http:/".$_SERVER'HTTP_HOST'.$PHP_SELF); exit(); if (iss

14、et($_COOKIE'msg') && $_COOKIE'msg' != '') if (get_magic_quotes_gpc() $msg = stripslashes($_COOKIE'msg'); else$msg = $_COOKIE'msg'setcookie('msg', ''); ?!- Beginning of main page -htmlheadtitleIFRAME Async file uploader example/title/hea

15、dbody?php if (isset($msg) echo 'p style="font-weight: bold;"'.$msg.'/p'? h1Upload file:/h1pFile will begin to upload just after selection. /ppYou may write file description, while you file is being uploaded./pform action="?=$PHP_SELF?" target="upload_iframe&q

16、uot; method="post" enctype="multipart/form-data"input type="hidden" name="fileframe" value="true"!- Target of the form is set to hidden iframe -!- From will send its post data to fileframe section of this PHP script (see above) -label for="file&

17、quot;text file uploader:/labelbr!- JavaScript is called by OnChange attribute -input type="file" name="file" id="file" onChange="jsUpload(this)"/formscript type="text/javascript"/* This function is called when user selects file in file dialog */funct

18、ion jsUpload(upload_field)/ this is just an example of checking file extensions/ if you do not need extension checking, remove / everything down to line/ upload_field.form.submit();var re_text = /.txt|.xml|.zip/i;var filename = upload_field.value;/* Checking file type */if (filename.search(re_text)

19、= -1)alert("File does not have text(txt, xml, zip) extension");upload_field.form.reset();return false;upload_field.form.submit();document.getElementById('upload_status').value = "uploading file."upload_field.disabled = true;return true;/scriptiframe name="upload_ifra

20、me" style="width: 400px; height: 100px; display: none;"/iframe!- For debugging purposes, it's often useful to remove"display: none" from style="" attribute -brUpload status:brinput type="text" name="upload_status" id="upload_status" value="not uploaded" size="64" disabledbrbrFile name:brinput type="text" name="filenamei" id=&