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(); } } } private String getFileName(final Part part) { final String partHeader = part.getHeader("content-disposition"); for (String content : part.getHeader("content-disposition").split(";")) { if (content.trim().startsWith("filename")) { return content.substring( content.indexOf('=') + 1).trim().replace("\"", ""); } } return null; } }

以上的上傳示例是來自官方的代碼，我我的也是測試過的，完整的示例

另外我還寫了一個sails的版本，有須要的能夠點擊查看。

結語

以上則是這個插件使用的所有內容，若是有什麼問題能夠直接點擊示例代碼進行查看，另外插件是我才寫出來的，若是有什麼問題請告訴我。謝謝，但願它能幫助你！

做者：Ziv小威

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