歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

node.js+Android(使用HttpURLConnection和HttpClient)實現文件上傳

這篇node.js 第三方模塊如何安裝(使用npm)及介紹  了formidable的安裝（見http://www.linuxidc.com/Linux/2012-02/53531.htm），這一篇結合Android寫一個文件上傳的例子。

先上服務端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。

運行以下看看


在浏覽器中打開http://localhost:8080

選擇文件，輸入文件name

點擊upload


後台截圖


文件上傳成功


再看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>  

Linux編程

node.js connect 實現文件上傳

使用 HTTP 上傳 G 級的文件之 Node.js 版本

Java使用HttpURLConnection上傳文件

使用HttpClient實現文件的上傳下載

使用Node.js實現守護進程

Struts2+Android 實現信息,文件上傳功能

Android使用http協議實現文件的上傳

Android分別使用HTTP協議和TCP協議實現上傳文件

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved