使用FormData实现ajax文件异步上传

1.传统的web开发文件上传一般是基于form表单的文件上传，同步的方式，用户体验差，可控性也差

2.异步上传的实现有以下方式

2.1 借助浏览器插件一般需要安装一些类似flash的插件这种方式缺点：需要安装插件优点：可控性强，性能高

2.2 这种是伪异步上传，借助表单向隐藏的iframe提交，然后通过iframe通信操作当前页面这种方式可控行查，体验一般，见下面代码

2.3 借助html5 里的 FormData 对象，可实现进度控制，异步的上传方式，见代码

iframe方式的伪异步上传

up.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<form method="post"  action="doup.php" enctype="multipart/form-data" target="up_file">
    姓名：<input name="user" type="text"><br>
    文件:<input type="file" name="ff"><br>
    <input type="submit" value="提交">
</form>
<iframe name="up_file" style="display: none"></iframe>
<div id="res"></div>
</body>
</html>

View Code