认识达内从这里开始

下面昆明IT培训导师分享一篇关于文件上传中的FileUpload对象，FileUpload对象，在网页上传文件，最核心元素就是这个HTML DOM的FileUpload对象了。这是什么鬼？你刚开始可能会觉得不好太熟啊，那我们就一起来看看：

<input type="file">

就是他啊！其实在HTML文档中该标签每出现一次，一个FileUpload对象就会被创建。该标签包含一个按钮，用来打开文件选择对话框，以及一段文字显示选中的文件名或提示没有文件被选中。

把这个标签放在<form>标签内，设置form的action为服务器目标上传地址，并点击submit按钮或通过JS调用form的submit()方法就可以实现最简单的文件上传了。

<form id="uploadForm" method="POST" action="upload" enctype="multipart/form-data">

<input type="file" id="myFile" ame="file"></input>

<input type="submit" value="提交"></input>

</form>

这样就完成功能啦？没错。但是你要是敢提交这样的代码，估计脸要被打肿

都什么年代了，我们要的是页面无刷新上传！

更优雅的上传

现代网页通过什么来实现用户与服务器的无刷新交互？

——XMLHttpRequest

对，就是这个你很熟悉的家伙。如果你开发的产品支持的浏览器是现代浏览器，那么恭喜你，文件上传就是这么easy！特别强调强调现代浏览器是因为我们接下来讨论的XMLHttpRequest指的是XMLHttpRequest Level 2。

那什么是Level 1？为什么不行？因为它有如下限制：

仅支持文本数据传输,无法传输二进制数据.

传输数据时,没有进度信息提示,只能提示是否完成.

受浏览器同源策略限制,只能请求同域资源.

没有超时机制,不方便掌控ajax请求节奏.

而XMLHttpRequest Level 2针对这些缺陷做出了改进：

支持二进制数据,可以上传文件,可以使用FormData对象管理表单.

提供进度提示,可通过xhr.upload.onprogress事件回调方法获取传输进度.

依然受同源策略限制,这个安全机制不会变. XHR2新提供Access-Control-Allow-Origin等headers,设置为*时表示允许任何域名请求,从而实现跨域CORS访问(有关CORS详细介绍请耐心往下读).

可以设置timeout及ontimeout,方便设置超时时长和超时后续处理.

关于XMLHttpRequest的细节就不在这里赘述了，有兴趣可以移步这篇博客。目前,主流浏览器基本上都支持XHR2,除了IE系列需要IE10及更高版本.因此IE10以下是不支持XHR2的.

上面提到的FormData就是我们最常用的一种方式。通过在脚本里新建FormData对象，把File对象设置到表单项中，然后利用XMLHttpRequest异步上传到服务器：

<form id="uploadForm" method="POST" action="upload" enctype="multipart/form-data">

<input type="file" id="myFile" ame="file"></input>

<input type="submit" value="提交"></input>

</form>

完成最基本的需求无法满足我们对用户体验的追求，所以我们还想要支持上传进度显示和上传图片预览。

想学IT技术嘛？来达内培训机构吧，这里有专业的技术，师资力量强大，是不错的选择！