摘要：最近工作中遇到上傳文件問(wèn)題，主要需求是一步點(diǎn)擊上傳，兼容，當(dāng)時(shí)用的控件，這兩天扒了一下源碼，明白了原理拿出來(lái)分享一下。組織頁(yè)面刷新端代碼使用模塊將文件暫存在目錄下。然后綁定的事件，通過(guò)取得中的數(shù)據(jù)。轉(zhuǎn)自無(wú)刷新文件上傳

最近工作中遇到上傳文件問(wèn)題，主要需求是一步點(diǎn)擊上傳，兼容ie8+，當(dāng)時(shí)用的dojox/form/uploader控件，這兩天扒了一下源碼，明白了原理拿出來(lái)分享一下。
總體思路如下：

對(duì)于支持XMLHttpRequest2的瀏覽器使用FormData通過(guò)ajax上傳

對(duì)于ie10一下的瀏覽器使用iframe異步上傳，還需后臺(tái)服務(wù)器做相應(yīng)處理，這部分也是dojo/request/iframe上傳文件的原理。

FormData最頻繁使用的功能就是表單序列化及創(chuàng)建與表單格式相同的數(shù)據(jù)。append方法接收兩個(gè)參數(shù)，字段名與字段值，字段值可以是File、Blob、String.

var data = new FormData(form);

data.append("name", "woodtree");

data.append(file.name, file);

data.append(name, Blob);

如果直接向FormData的構(gòu)造函數(shù)中傳入表單元素，可以將表單元素的數(shù)據(jù)預(yù)先填入。

new FormData(document.forms[0])

FormData的另一個(gè)便利之處就是不用明確指定Content-Type頭部，xhr對(duì)象能夠根據(jù)FormData實(shí)例自動(dòng)配置適當(dāng)?shù)念^部。下面是一個(gè)簡(jiǎn)單的上傳文件demo。

server端代碼使用formidable模塊將文件暫存在tmp目錄下。

var http = require("http");
var url = require("url");
var fs = require("fs");
var qs = require("querystring");
var request = require("request");
var formidable = require("formidable");

http.createServer(function(req, res){
    var _url = url.parse(req.url);      if (_url.pathname === "/index") {         fs.readFile("./index.html", function(err, data) {              res.writeHead(200, {"Content-Type": "text/html; charset=UTF-8"});             res.write(data);             res.end();           });        } else if (_url.pathname === "/upload") {           console.log(req.headers["content-type"]);          handle(req, res);     }    }).listen(8888);    var handle = function(req, res) {       if (req.headers["content-type"].indexOf("multipart/form-data") >= 0) {         var formStream = new formidable.IncomingForm();          formStream.uploadDir = "./tmp";           formStream.parse(req, function(err, fields, files) {               res.writeHead(200, {"Content-Type": "application/json"});              if (err) {                    res.write("{"success": false}");                } else {                    res.write("{"success": true}");             }                res.end();          });       }  }

查看請(qǐng)求，xhr自動(dòng)為我們?cè)O(shè)置請(qǐng)求頭部。

兼容性問(wèn)題

兼容舊版本的ie瀏覽器實(shí)現(xiàn)無(wú)刷新上傳，只能借由iframe來(lái)實(shí)現(xiàn)，大多數(shù)類庫(kù)的做法是動(dòng)態(tài)插入一個(gè)iframe元素，將form元素的target屬性設(shè)置為新添加的iframe，這樣只刷新了iframe的內(nèi)容而避免頁(yè)面跳轉(zhuǎn)到form元素的action屬性所指定的url。這里我們根據(jù)dojo/request/iframe模塊的原理來(lái)實(shí)現(xiàn)上傳文件。
該模塊需要后臺(tái)返回響應(yīng)的格式來(lái)配合。將需要返回的信息放在textarea標(biāo)簽內(nèi)。然后綁定iframe的load事件，通過(guò)doc.getElementsByTagName("textarea")取得textarea中的數(shù)據(jù)。

  
          uploadInfo
    
  

下面是簡(jiǎn)單的demo

    
        
        
    
        
    
    
        

            
        
        
        
    




var http = require("http");
var url = require("url");
var fs = require("fs");
var qs = require("querystring");
var formidable = require("formidable");

http.createServer(function(req, res) {
  var _url = url.parse(req.url);
  if (_url.pathname === "/index") {
    fs.readFile("./index.html", function(err, data) {
      res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8"
      });
      res.write(data);
      res.end();
    });
  } else if (_url.pathname === "/upload") {
    var formStream = new formidable.IncomingForm();
    formStream.uploadDir = "./tmp";
    formStream.parse(req, function(err, fields, files) {
      console.log(fields);
      console.log(files);
      var info = null;
      var accept = req.headers.accept;
      if (err) {
        info = {success: false};
      } else {
        info = {success: true};
      }
      if (accept.indexOf("application/json") > -1) {
        res.writeHead(200, {
          "Content-Type": "application/json;charset=utf-8"
        });
        res.write(JSON.stringify(info));
      } else {
        res.writeHead(200, {
          "Content-Type": "text/html; charset=UTF-8"
        });
        var responseText = "" +
          JSON.stringify(info) +
          "";
        res.write(responseText);
      }
      res.end();
    });
  }
}).listen(8888);

后臺(tái)代碼需要注意Content-Type響應(yīng)頭的設(shè)置，ie8、9碰到不知如何渲染的MIME類型會(huì)把它當(dāng)成文件下載下來(lái)。這里和這里

不知大家有沒有注意到，上面的demo是一步上傳，選擇好文件后直接上傳到服務(wù)器，ie8以上的瀏覽器沒問(wèn)題，如果是在ie8中情況就有些棘手。ie中文件上傳控件長(zhǎng)成這個(gè)樣子，單擊一下button會(huì)彈出文件選擇框，如果單擊的是text部分，沒有反映，你需要雙擊才會(huì)彈出選擇框。一個(gè)辦法是讓鼠標(biāo)盡量單擊button部分，button的大小跟font-size有關(guān)。但如果你的可點(diǎn)擊區(qū)域太大。。。。。

所幸還是有解決辦法的，這時(shí)需要在form中加一個(gè)label標(biāo)簽，for屬性指向file。這樣點(diǎn)擊label時(shí)會(huì)觸發(fā)for指向元素的click事件，這時(shí)label的自然行為。同時(shí)把file移除屏幕外。注意一定不能用input[type=button]，在點(diǎn)擊button時(shí)候調(diào)用file的click事件，然后在file change事件中調(diào)用form.submit方法，這種行為在ie中是被禁止的，回報(bào)“access denied”錯(cuò)誤。

    
    
    
    
        
    
    
       

           upload
           
        
        
        
    

轉(zhuǎn)自：Javascript無(wú)刷新文件上傳