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"myfilevalue"namemultiple"multiple"/> <button "uploader">Upload</button>

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

"/> <input "file1"myfile1">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!"); } } },117); line-height:1.8">// MB type: { name: 'csv;png;jpg',valide: "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) { 'loading').innerHTML = "The file upload successfully!"; alert("The file upload successfully."); } },fail: function(data) { } }); },false); >

以上是针对单个input元素的上传，H5Uploader.upload()方法是支持Array类型和Object类型的，也就是说，如果你有多个input元素同时上传的需求的话，你可以这样写：

uploader.addEventListener("click",function(e) { H5Uploader.upload([{ action: 'upload',id: 'myfile0',size: { max: 5000,// 5000kb  valide: function(e) { } },117); line-height:1.8">// MB type: { name: 'csv;json',valide: : function() { },success: function(data) { },fail: function(data) { } },{ action: 'myfile1',152); line-height:1.8">'png;jpg',0); line-height:1.8">function(data) { } }]); },false);

Nodejs服务端

服务端是expressjs，利用的一个上传中间件multer

var express = require('express'); var multer = '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/'}),0); line-height:1.8">function(req,res) { try { console.log(req.body.myfile); console.log(req.files); res.json(200); } catch (e) { console.log(e); } }]);

完整的示例代码，请看

Java servlet示例

此处没有用任何框架或者库，只是Servlet3.0,用tomcat6的同学要注意哦。

package com.h5uploader.demo; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import javax.servlet.servletexception; import javax.servlet.annotation.MultipartConfig; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.Part; @MultipartConfig public class UploaderServlet extends HttpServlet { public void service(HttpServletRequest req,HttpServletResponse res) throws IOException,servletexception { res.setContentType("text/html;charset=UTF-8"); // Create path components to save the file final String path = "/Users/ziv/Desktop/"; final Part filePart = req.getPart("myfile0"); final String fileName = getFileName(filePart); OutputStream out = null; InputStream filecontent = null; final PrintWriter writer = res.getWriter(); try { out = new FileOutputStream(new File(path + File.separator + fileName)); filecontent = filePart.getInputStream(); int read = 0; final byte[] bytes = new byte[1024]; while ((read = filecontent.read(bytes)) != -1) { out.write(bytes,0,read); } writer.println("New file " + fileName + " created at " + path); } catch (FileNotFoundException fne) { writer.println("You either did not specify a file to upload or are " + "trying to upload a file to a protected or nonexistent " + "location."); writer.println("<br/> ERROR: " + fne.getMessage()); } finally { if (out != null) { out.close(); } if (filecontent != null) { filecontent.close(); } if (writer != null) { writer.close(); } } } private String