這篇node.js 第三方模塊如何安裝(使用npm)及介紹 了formidable的安裝（見http://www.linuxidc.com/Linux/2012-02/53531.htm），這一篇結合Android寫一個文件上傳的例子。
先上服務端node.js 的代碼，保存為upload.js
[javascript]
- var http = require('http');
- var fs = require('fs');
- var formidable = require('formidable');
-
- var firstPage = function(res){
- res.writeHead(200, {'Content-Type': 'text/html'});
- var html = fs.readFileSync(__dirname + '/public/form.html');
- res.end(html);
- }
-
- var resultPage = function(res,data,files){
- res.setHeader('Content-Type', 'text/html');
- res.write('<p>thanks ' + data.name + '</p>');
- res.write('<ul>');
- console.log(data);
- console.log(files);
-
- if (Array.isArray(files.images)) {
- files.images.forEach(function(image){
- var kb = image.size / 1024 | 0;
- res.write('<li>uploaded ' + image.name + ' ' + kb + 'kb</li>');
- });
- } else {
- var image = files.images;
- var kb = image.size / 1024 | 0;
- res.write('<li>uploaded ' + image.name + ' ' + kb + 'kb</li>');
- }
-
- res.end('</ul>');
- }
-
- var server = http.createServer(function(req, res) {
- if (req.method == 'GET'){
- return firstPage(res);
- }
-
- var form = new formidable.IncomingForm;
- var data = {};
- var files = {};
-
- form.uploadDir = __dirname +'/file';
- form.keepExtensions = true;
-
- function ondata(name, val, data){
- if (Array.isArray(data[name])) {//數組
- data[name].push(val);
- } else if (data[name]) {//同key
- data[name] = [data[name], val];
- } else {//第一次
- data[name] = val;
- }
- }
-
- form.on('field', function(name, val){
- ondata(name, val, data);
- });
-
- form.on('file', function(name, val){
- ondata(name, val, files);
- });
- form.on('end', function() {
- resultPage(res,data,files);
- });
-
- form.parse(req);
-
- });
- server.listen(8080);
-
- console.log('listening on http://localhost:8080');
__dirname + '/public/form.html，在js當前目錄下建立public文件夾，文件夾下建立form.html文件，文件內容如下
[html]
- <html>
- <body>
- <form action="/" method="post" enctype="multipart/form-data">
- <input type="text" name="name" placeholder="Name:" />
- <input type="file" name="images" multiple="multiple" />
- <input type="submit" value="Upload" />
- </form>
- </body>
- </html>
代碼比較簡單，formidable部分可以上官網https://github.com/felixge/node-formidable看API。
運行以下看看
在浏覽器中打開http://localhost:8080
選擇文件，輸入文件name
點擊upload
後台截圖
文件上傳成功
再看android代碼，布局文件main.xml如下
[html]
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/RelativeLayout1"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
-
- <TextView
- android:id="@+id/textViewInfo"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentTop="true"/>
-
- <TextView
- android:id="@+id/textView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_below="@+id/textViewInfo"
- android:layout_marginLeft="40dp"
- android:layout_marginTop="20dp"
- android:text="文件路徑"
- android:textAppearance="?android:attr/textAppearanceMedium" />
-
- <TextView
- android:id="@+id/textViewFile"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignLeft="@+id/textView1"
- android:layout_below="@+id/textView1"/>
-
- <TextView
- android:id="@+id/textView3"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignLeft="@+id/textViewFile"
- android:layout_below="@+id/textViewFile"
- android:layout_marginTop="10dp"
- android:text="上傳網址"
- android:textAppearance="?android:attr/textAppearanceMedium" />
-
- <TextView
- android:id="@+id/textViewUrl"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignLeft="@+id/textView3"
- android:layout_below="@+id/textView3"/>
-
- <WebView
- android:id="@+id/webViewResult"
- android:layout_width="fill_parent"
- android:layout_height="100dp"
- android:layout_below="@+id/textViewUrl"
- android:layout_marginTop="30dp"/>
-
- <Button
- android:id="@+id/buttonJava"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:layout_marginLeft="60dp"
- android:text="Java上傳" />
-
- <Button
- android:id="@+id/buttonApache"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignBottom="@+id/buttonJava"
- android:layout_toRightOf="@+id/buttonJava"
- android:text="Apache上傳" />
-
- </RelativeLayout>
