仿ajax无刷新上传文件
在做的一个基本全用ajax(什么是ajax)的项目，接近收工时碰到一个头痛的问题，上传文件无法用ajax实现。后来想了一下也确实是这样，ajax与后台通信全部是通过传递字符串的，怎么可能传递文件呢？再说出于安全考虑，js也是不能操作文件的，更不要说ajax上传文件了。
经过网上搜索，学会了一中方法，实现“类似ajax”的无刷新上传文件。
其实在ajax技术出现之前web应用就可以实现无刷新的，主要用iframe。当ajax出现，并由google带动起来后，大家都去使用ajax，iframe也无人问津了。但是可以去看一下gmail的文件上传，还是在用iframe。也就是说，要实现无刷新上传文件，iframe还是最佳的选择。
代码（只有关键部分，其它部分与正常文件上传类似）：
html
- <form id="upform" enctype="multipart/form-data" action="upload.php" method="post" target="hidden_frame">
- <input type="file" name="file" id="file" onchange="upload()" />
- <input type="hidden" name="MAX_FILE_SIZE" value"10485760" />
- <div id="upmsg"></div>
- </form>
- <iframe id="hidden_frame" name="hidden_frame" style="display:none"></iframe>
当中比较关键的是form里的target=”hidden_frame”，和一个name=”hidden_frame”的隐藏的iframe。这样form上传的处理就会在隐藏的iframe中进行，大页面没有刷新。
js
- function upback(msg)
- {
- document.getElementById("file").value="";
- document.getElementById("file").outerHTML=document.getElementById("file").outerHTML;
- document.getElementById("upmsg").innerHTML=msg;
- }
js函数的前两行就是用来清空上传框的，由于浏览器差异，清空的方法有点不同请注意一下。然后把后台的返回信息显示到预留的空间里。
php
- <?php
- echo ‘<script type="text/javascript">parent.upback("文件上传成功")</script>‘;
- ?>
后台上传文件的过程这里就不贴了，关键就是返回信息时，在iframe里输出js代码来控制它的父页面。
最终这三部分合作就能完成“仿ajax”的无刷新上传文件了，你也试试吧。
