摘要：文件上傳在不借助第三方的插件的情況下進(jìn)行文件上傳可利用表單對(duì)象表單是不存在瀏覽器的兼容性的，同時(shí)在被禁用的情況下也能進(jìn)行文件的傳輸，因此可以大膽使用。使用表單提交文件一個(gè)非常典型的應(yīng)用場(chǎng)景就是上傳圖片，但是頁面不刷新。

在不借助第三方的插件的情況下進(jìn)行文件上傳可利用：

Form表單

FormData對(duì)象

Form表單是不存在瀏覽器的兼容性的，同時(shí)在js被禁用的情況下也能進(jìn)行文件的傳輸，因此可以大膽使用。Form表單提交不同于Ajax，Ajax提交數(shù)據(jù)還需要利用腳本進(jìn)行數(shù)據(jù)的處理，而Form是不需要進(jìn)行任何數(shù)據(jù)處理的。

使用Form表單提交文件一個(gè)非常典型的應(yīng)用場(chǎng)景就是上傳圖片，但是頁面不刷新。

target(數(shù)據(jù)提交完后，后臺(tái)返回?cái)?shù)據(jù)展示的位置,常用_blank, _self, 指定的iframe)

action(數(shù)據(jù)提交的接口)

enctype(設(shè)置上傳數(shù)據(jù)編碼類型,常用的application/x-www-form-urlencoded,multipart/form-data)

method(HTTP請(qǐng)求的方式,常用GET/POST)

使用Form表單異步上傳圖片，獲取后臺(tái)返回的圖片路徑，頁面不發(fā)生跳轉(zhuǎn)。

    Html:
    
    

        
    
    點(diǎn)擊上傳
    

js:

    (function(window) {
        var win = window,
            btn = document.getElementsByTagName("button")[0],
            container = document.getElementById("container"),
            form = document.getElementsByTagName("form")[0];
            
            btn.addEventListener("click", function() {
                var ifr = document.createElement("iframe");
                    ifr.id = "test-ifr";
                    ifr.name = "test-ifr";
                    //隱藏iframe
                    ifr.style.display = "none";

                    container.appendChild(ifr);
                    //iframe加載事件,獲取到數(shù)據(jù)以前onload會(huì)觸發(fā)一次,獲取到數(shù)據(jù)后再觸發(fā)一次,需要添加一個(gè)判斷
                    ifr.onload = function () {
                       //后臺(tái)盡量傳JSON的字符串,這樣可以確保一致性,同時(shí)可以調(diào)用innerHTML來獲取DOM里面的內(nèi)容
                        var _result = JSON.parse(this.contentDocument.getElementsByTagName("body")[0].innerHTML);
                    //iframe的body標(biāo)簽里面的內(nèi)容就是從后臺(tái)傳輸過來的數(shù)據(jù)。例如后臺(tái)傳輸過來的是圖片的url地址
                    var _img = new Image();
                    _img.src = _result.url;
                    container.appendChild(_img);//顯示圖片
        };

                    //調(diào)用Form表單事件
                    form.submit();
            })
    })(window);

server:

var express = require("express");
var bodyParser = require("body-parser");
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static("./"));

app.get("/", function (req, res) {
    res.sendFile("index.html");
});

app.post("/", function (req, res) {
    setTimeout(function () {
        var str = JSON.stringify({url: "./imgs/1.png"});
        res.send(str);
    }, 1000);
});

app.listen(3000, function () {
    console.log("The server has start up on port of 3000");
});

如果現(xiàn)在需求變化了，必須要求前端上傳圖片后需要立馬在前端展示出來，而不是通過上傳至服務(wù)器端，拿到Url后再展示?，F(xiàn)在HTML5提供了3種API可以做到。

FileReader

canvas

ceateObjectURL()

    
    //multiple屬性支持多文件上傳
    

    var aInput = document.getElementByTagName("input")[0],
        imgContainer = document.getElementByClassName("img-container")[0];
    aInput.addEventListener("change", function() {
        for(var i = 0; i < this.files.length; i++) {
            var img = new Image(),
                reader = new FileReader(),
                url = reader.readAsDataURL(this.files[i]);
            
            imgContainer.appendChild(img);
            
            reader.onload = function(e) {
                img.src = e.target.result;
            }
        }
    });

這個(gè)API主要是是將Image轉(zhuǎn)化成了base64,這樣圖片就能在不推送的服務(wù)器后才顯示。
FileReader兼容性

canvas是在網(wǎng)頁中生成一塊畫圖，然后利用drawImage方法，將圖片在畫布中重新繪制。

    var img = new Image(),
            canvas;
    img.onload = function () {
        canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0);
        console.log(canvas.toDataURL());
        document.body.appendChild(canvas);
        return canvas;
    };
    img.src = "./images/1.png";
    
    //drawImage即將img畫到畫布區(qū)域內(nèi),接收三個(gè)參數(shù),第一個(gè)是img對(duì)象,第二個(gè)是繪制的起始位置水平,第三個(gè)是繪制的垂直位置。

canvas兼容性