node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

先上服务端node.js 的代码,保存为upload.js

[Javascript]
  1. var http = require('http');  
  2. var fs = require('fs');  
  3. var formidable = require('formidable');  
  4.   
  5. var firstPage = function(res){  
  6.     res.writeHead(200, {'Content-Type''text/html'});  
  7.     var html = fs.readFileSync(__dirname + '/public/form.html');  
  8.     res.end(html);  
  9. }  
  10.   
  11. var resultPage = function(res,data,files){  
  12.     res.setHeader('Content-Type''text/html');  
  13.     res.write('<p>thanks ' + data.name + '</p>');  
  14.     res.write('<ul>');  
  15.     console.log(data);  
  16.     console.log(files);  
  17.   
  18.     if (Array.isArray(files.images)) {  
  19.       files.images.forEach(function(image){  
  20.         var kb = image.size / 1024 | 0;  
  21.         res.write('<li>uploaded ' + image.name + ' ' + kb + 'kb</li>');  
  22.       });  
  23.     } else {  
  24.       var image = files.images;  
  25.       var kb = image.size / 1024 | 0;  
  26.       res.write('<li>uploaded ' + image.name + ' ' + kb + 'kb</li>');  
  27.     }  
  28.   
  29.     res.end('</ul>');  
  30. }  
  31.   
  32. var server = http.createServer(function(req, res) {  
  33.     if (req.method == 'GET'){  
  34.         return firstPage(res);  
  35.     }  
  36.   
  37.     var form = new formidable.IncomingForm;  
  38.     var data = {};  
  39.     var files = {};  
  40.   
  41.     form.uploadDir = __dirname +'/file';  
  42.     form.keepExtensions = true;  
  43.   
  44.     function ondata(name, val, data){  
  45.         if (Array.isArray(data[name])) {//数组   
  46.             data[name].push(val);  
  47.         } else if (data[name]) {//同key   
  48.             data[name] = [data[name], val];  
  49.         } else {//第一次   
  50.             data[name] = val;  
  51.         }  
  52.     }  
  53.   
  54.     form.on('field'function(name, val){  
  55.         ondata(name, val, data);  
  56.     });  
  57.   
  58.     form.on('file'function(name, val){  
  59.         ondata(name, val, files);  
  60.     });  
  61.     form.on('end'function() {  
  62.         resultPage(res,data,files);   
  63.     });  
  64.   
  65.     form.parse(req);  
  66.   
  67. });  
  68. server.listen(8080);  
  69.   
  70. console.log('listening on http://localhost:8080');  
__dirname + '/public/form.html,在js当前目录下建立public文件夹,文件夹下建立form.html文件,文件内容如下
[html]
  1. <html>  
  2.     <body>  
  3.         <form action="/" method="post" enctype="multipart/form-data">  
  4.           <input type="text" name="name" placeholder="Name:" />  
  5.           <input type="file" name="images" multiple="multiple" />  
  6.           <input type="submit" value="Upload" />  
  7.         </form>  
  8.     </body>  
  9. </html>  

代码比较简单,formidable部分可以上官网https://github.com/felixge/node-formidable看API。

运行以下看看

node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

在浏览器中打开http://localhost:8080

node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

选择文件,输入文件name

node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

点击upload

node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

后台截图

node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

文件上传成功

node.js+Android(使用HttpURLConnection和HttpClient)实现文件上

再看android代码,布局文件main.xml如下

[html]
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/RelativeLayout1"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <TextView  
  9.         android:id="@+id/textViewInfo"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_alignParentLeft="true"  
  13.         android:layout_alignParentTop="true"/>  
  14.           
  15.     <TextView  
  16.         android:id="@+id/textView1"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_alignParentLeft="true"  
  20.         android:layout_below="@+id/textViewInfo"  
  21.         android:layout_marginLeft="40dp"  
  22.         android:layout_marginTop="20dp"  
  23.         android:text="文件路径"   
  24.         android:textAppearance="?android:attr/textAppearanceMedium" />  
  25.   
  26.     <TextView  
  27.         android:id="@+id/textViewFile"  
  28.         android:layout_width="wrap_content"  
  29.         android:layout_height="wrap_content"  
  30.         android:layout_alignLeft="@+id/textView1"  
  31.         android:layout_below="@+id/textView1"/>  
  32.   
  33.     <TextView  
  34.         android:id="@+id/textView3"  
  35.         android:layout_width="wrap_content"  
  36.         android:layout_height="wrap_content"  
  37.         android:layout_alignLeft="@+id/textViewFile"  
  38.         android:layout_below="@+id/textViewFile"  
  39.         android:layout_marginTop="10dp"  
  40.         android:text="上传网址"   
  41.         android:textAppearance="?android:attr/textAppearanceMedium" />  
  42.   
  43.     <TextView  
  44.         android:id="@+id/textViewUrl"  
  45.         android:layout_width="wrap_content"  
  46.         android:layout_height="wrap_content"  
  47.         android:layout_alignLeft="@+id/textView3"  
  48.         android:layout_below="@+id/textView3"/>  
  49.       
  50.     <WebView   
  51.         android:id="@+id/webViewResult"  
  52.         android:layout_width="fill_parent"  
  53.         android:layout_height="100dp"  
  54.         android:layout_below="@+id/textViewUrl"  
  55.         android:layout_marginTop="30dp"/>  
  56.       
  57.     <Button  
  58.         android:id="@+id/buttonJava"  
  59.         android:layout_width="wrap_content"  
  60.         android:layout_height="wrap_content"  
  61.         android:layout_alignParentBottom="true"  
  62.         android:layout_marginLeft="60dp"  
  63.         android:text="Java上传" />  
  64.   
  65.     <Button  
  66.         android:id="@+id/buttonApache"  
  67.         android:layout_width="wrap_content"  
  68.         android:layout_height="wrap_content"  
  69.         android:layout_alignBottom="@+id/buttonJava"  
  70.         android:layout_toRightOf="@+id/buttonJava"  
  71.         android:text="Apache上传" />  
  72.   
  73. </RelativeLayout>  

相关推荐