兩種文件上傳的實現－Ajax上傳和form+iframe

時間 2019-11-15

標籤兩種文件上傳實現 ajax form+iframe form iframe 欄目 Ajax 简体版

原文原文鏈接

前言

話說如今不少不少項目須要用到文件上傳，自從有了HTML5以後，上傳就變的超級簡單了。HTML5支持多圖片上傳，並且支持ajax上傳！並且支持上傳以前圖片的預覽！並且支持圖片拖拽上傳！並且仍是純粹利用file控件實現！並且代碼還超級簡單！！！原諒我這個沒見過世面的人這麼激動==，可是說真的，有這麼多優勢，想不讓人稱讚都難啊！javascript

HTML5 Ajax上傳

html5的上傳實現，是須要file控件以及XMLHttpRequest請求。下面是我使用原生js封裝的一個上傳插件：php

function fileUpload(options) {
    var opts = options || {};
    var func = function() {};
    this.fileInput = opts.fileInput || null;
    this.url = opts.url || '';
    this.fileList = [];
    this.onFilter = opts.onFilter || function(f) {return f;};        //選擇文件組的過濾方法
    this.onSelect = opts.onSelect || func;            //文件選擇後
    this.onProgress = opts.onProgress || func;        //文件上傳進度
    this.onSuccess = opts.onSuccess || func;        //文件上傳成功時
    this.onFailure = opts.onFailure || func;        //文件上傳失敗時;
    this.onComplete = opts.onComplete || func;        //文件所有上傳完畢時
    this.init();
}
fileUpload.prototype = {
    dealFiles: function(e) {     //獲取要上傳的文件數組（用戶選擇文件後執行）
        var files = e.target.files || e.dataTransfer.files;
        this.fileList = this.onFilter(files);
        for(var i = 0, file; file = this.fileList[i]; i++){   //增長惟一索引值
            file.index = i;
        }
        this.onSelect(this.fileList);
        return this;
    },
    removeFile: function(fileDelete) {     //刪除某一個文件
        var arrFile = [];
        for(var i = 0, file; file = this.fileList[i]; i++){
            if (file != fileDelete) {
                arrFile.push(file);
            }
        }
        this.fileList = arrFile;
        return this;
    },
    removeAll: function() {     //清空文件隊列
        this.fileList = [];
        return this;
    },
    uploadFile: function() {     //上傳文件
        var me = this;
        for(var i = 0, file; file = this.fileList[i]; i++){
            (function(file) {
                var formData = new FormData();
                var xhr = new XMLHttpRequest();
                if (xhr.upload) {
                    xhr.upload.addEventListener("progress", function(e) {   // 上傳中
                        me.onProgress(file, e.loaded, e.total);
                    }, false);
                    xhr.onreadystatechange = function(e) {      // 文件上傳成功或是失敗
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                me.onSuccess(file, xhr.responseText);
                                me.removeFile(file);
                                if (!me.fileList.length) {
                                    me.onComplete();   //上傳所有完畢。執行回調
                                }
                            } else {
                                me.onFailure(file, xhr.responseText);
                            }
                        }
                    };
                    // 開始上傳
                    formData.append('file', file);
                    xhr.open("POST", me.url, true);
                    xhr.send(formData);
                }
            })(file);
        }
    },
    init: function() {
        var me = this;
        //文件選擇控件選擇
        if (me.fileInput) {
            me.fileInput.addEventListener("change", function(e) { me.dealFiles(e); }, false);
        }
    }
};

相信你們也看到了，代碼中出現了FormData,這就是html5的神奇之處了。藉助FormData輕鬆實現異步無刷新支持預覽圖片的多文件上傳功能。並且，使人欣慰的是，如今已經有不少瀏覽器都已經支持HTML5了。html

可是！！！IE9如下的版本不支持呀！！html5

除此以外，上面的方法還有一個弊端，由於使用了ajax的上傳方式，因此不能支持跨域上傳，若是必需要知足這兩個業務場景，那就試試下面的方法吧，藉助form和iframe來實現上傳。下面來詳細看一下：java

form表單提交到iframe

html代碼:ajax

<iframe name="demoIframe" style="display:none"></iframe>
<form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">
    <input class="filename" type="file" name="fileLabel">
    <input type="submit" value="提交">
</form>

咱們點擊提交,能夠看到下面的請求： json

已經把文件上傳。那麼，加入這個upload.php接口可用，並且假如上傳成功後，會返回：跨域

{
    "code": "200",
    "success": true,
    "data": {
        ...
    }
}

咱們要怎麼去獲取返回值，從而進行下一步的操做呢？由於咱們是上傳到了iframe中，因此咱們只須要監聽iframe的load事件，若是有返回值了，咱們就能獲取到，從而進行進一步處理。看js代碼：數組

$('iframe').on('load', function() {
    var responseText = $('iframe')[0].contentDocument.body.textContent;
    var responseData = JSON.parse(responseText) || {};
    if (responseData.isSuccess == true || responseData.code == 200) {
        //success
    } else {
        //error   
    }
});

這樣咱們就完成了一個支持全部瀏覽器的上傳文件操做了。仍是很簡單的吧^_^瀏覽器