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');
uploader.addEventListener("click", function(e) {
H5Uploader.upload({
action: 'upload',
id: 'myfile0',
size: {
max: 5000, // 5000kb
valide: function(e) {
if (e) {
alert("The size of " + e.name + " is exceed max value!");
}
}
}, // MB
type: {
name: 'csv;png;jpg',
valide: function(e) {
if (e) {
alert("The type of " + e.name + " is not supported!");
}
}
},
progress: function() {
var p = document.createElement('p');
p.innerHTML = "uploading";
p.id = "loading";
document.body.appendChild(p);
},
success: function(data) {
alert(data);
if (data && data == 200) {
document.getElementById('loading').innerHTML = "The file upload successfully!";
alert("The file upload successfully.");
}
},
fail: function(data) {
}
});
}, false);
</script>
以上是针对单个input元素的上传，H5Uploader.upload()方法是支持Array类型和Object类型的，也就是说，如果你有多个input元素同时上传的需求的话，你可以这样写：
uploader.addEventListener("click", function(e) {
H5Uploader.upload([{
action: 'upload',
id: 'myfile0',
size: {
max: 5000, // 5000kb
valide: function(e) {
}
}, // MB
type: {
name: 'csv;json',
valide: function(e) {
}
},
progress: function() {
},
success: function(data) {
},
fail: function(data) {
}
},{
action: 'upload',
id: 'myfile1',
size: {
max: 5000, // 5000kb
valide: function(e) {
}
}, // MB
type: {
name: 'png;jpg',
valide: function(e) {
}
},
progress: function() {
},
success: function(data) {
},
fail: function(data) {
}
}]);
}, false);
Nodejs服务端
服务端是expressjs，利用的一个上传中间件multer
var express = require('express');
var multer = require('multer');
var app = express();
var done = false;
app.use(express.static('./public'));
// respond with "hello world" when a GET request is made to the homepage
app.post('/upload',[multer({dest: './uploads/'}), function(req, res) {
try {
console.log(req.body.myfile);
console.log(req.files);
res.json(200);
} catch (e) {
console.log(e);
}
}]);
完整的示例代码，请看
另外我还写了一个sails的版本，有需要的可以点击查看。
结语
以上则是这个插件使用的全部内容，如果有什么问题可以直接点击示例代码进行查看，另外插件是我才写出来的，如果有什么问题请告诉我。谢谢，希望它能帮助你！
