使用iframe无刷新上传[整理]

又是一篇整理文章，skidu的一贯风格是想到什么说什么，啊哈哈~
好吧，进入正文
这次需要实现的功能是：

通过使用iframe提交form表单来实现文件的无刷新上传。
嗯，当然，这个也可以用来当做普通的无刷新表单提交。

这个功能skidu的具体使用场景

选择完文件确定后直接在后台上传文件然后弹窗显示出头像编辑器
最后完成头像上传流程

实现的大致原理是使用iframe来提交上传的头像文件，这样就能在iframe中直接显示上传完毕后程序需要显示的页面内容。控制好这个iframe的显示样式等，就可以实现“无刷新”式的操作流程。

嗯，虽然这个功能已经有很多插件可以实现了，不过这里还是写写我的实现方式吧。

首先我们需要一个表单：

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
  <input type="submit" value="提交" />
</form>

这样，在点击提交按钮会表单会把我们带到upload.php页面执行文件上传操作，然后upload.php页面中写入一些逻辑来决定我们之后的操作是什么。
php文件上传（或者别的语言）demo很多，这里就不多描述了。

做过的哥们应该都知道这样是会页面跳转的，根本无法满足我们“无刷新”的要求

好，继续完善刚刚html，我们添加一个iframe

<iframe name="avatar_page"></iframe>
<form action="upload.php" method="post" enctype="multipart/form-data" target="avatar_page">
  <input type="file" name="avatar" />
  <input type="submit" value="提交" />
</form>

和第一段代码的区别：
我们添加了一个iframe，然后form中也增加了一个target的属性，它的值指向iframe的name，此时该表单就会将内容提交到该iframe中进行提交，这样就避免了主界面的刷新。

嗯。大致思路就是上面这样了，以上demo仅仅实现了一个无刷新的上传，更多“复杂”的功能还得根据实际情况修改哦~~

===============↓ add by skidu , 2012.09.24 17:05 ↓ ===============

本次更新很是蛋疼，写了改改了写，其实代码就只有这么一点点。。但是因为自己使用方式和demo不一样，所以skidu总感觉有漏写了什么。。于是只好让它在我的草稿箱中躺了一个多月，直到昨天同学问到类似的一个问题俺才想起来这兄弟还在草稿箱中啃煤灰0.0

好吧，先这么放出来吧

希望国庆这段时间能有机会整理一下前面几篇日志中所有内容的综合应用，做一个JS版带拖拽选择、预览功能的头像上传（skidu的确不会flash，那就借js来实现吧 囧rz....）