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); } }]);

完整的示例代码，请看

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(); } 

转载于:https://www.cnblogs.com/zivxiaowei/p/4486462.html