HTML5 文件异步上传 — h5uploader.js

原文地址：http://imziv.com/blog/article/read.htm?id=62

之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题，文章写的不是很好，比较早了。其实通过H5做异步上传已经非常简单了，通过查看文档，便可以很轻松的完成这个功能，当然，如果你不愿意查看文档自己动手的话，那么就用插件咯。h5uploader是我最近封装的HTML5上传插件，代码才白来行，使用的话也比较简单，支持文件大小，类型，progress等等功能。本篇教程，将向你展示Nodejs,Java两种服务端的上传方法，并且附有源代码示例。

插件下载

如果你是bower的用户的话，可以直接通过以下命令：

bower install h5uploader --save

当然也可以直接从Github Clone此项目：

git clone https://github.com/wewoor/h5uploader.git

HTML代码

<input type="file" id="myfile" value="" name="myfile" multiple="multiple"/> <button id="uploader">Upload</button>

以上是一个file类型的input元素以及一个上传触发按钮，后面带有multiple属性，表示次处支持文件多选上传，当然，你也可以一次提交多个input元素，例如：

<input type="file" id="myfile" value="" name="myfile" multiple="multiple"/> <input type="file1" id="myfile1" value="" name="myfile" multiple="multiple"/> <button id="uploader">Upload</button>

这种方法同样是可以的，只不过服务端解析的时候要更麻烦。

Javascript

<script type="text/javascript" src="html5uploader.js"></script> <script type="text/javascript"> var uploader = document.getElementById('uploader')