国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

web端文件上傳功能的思考

Jaden / 654人閱讀

摘要:概述文件上傳是一個很常見的需求,實現文件上傳的技術也很多。幫助文檔模擬無刷新的文件上傳功能頁面無刷新上傳文件模擬,超簡單為什么上傳文件的表單里要加個屬性接口對象的介紹使用對象涉及文章侵權,請郵件告知。

概述

文件上傳是一個很常見的需求,實現文件上傳的技術也很多。下面就談談一些常見的上傳技術以及它們的優劣。

傳統表單上傳

傳統表單文件上傳估計是運用最廣泛和最簡單的技術了,說它簡單是因為只要指定表單的enctypemultipart/form-data,就行了。簡單可靠所以被運用的廣泛。傳統表單上傳示例如下所示:

表單中的action參數指的是后臺處理上傳文件的接口。target參數規定了規定在何處打開 action URL,常見的參數有_blank、_self、__top或者指定的iframe。method參數規定了表單提交的方式,這里只能使用**post**方式提交,而不能用**get**方式。最后enctype的參數規定了在發送到服務器之前應該如何對表單數據進行編碼方式,常見的參數有**application/x-www-form-urlencoded**、**text/plain**和示例中的**multipart/form-data**,因為上傳的文件都是非純文本傳輸,所以指定的類型必須只能是**multipart/form-data**。

這種方式的局限性是不能批量處理,而且表單上傳是同步的,表單已提交,頁面就會刷新。

第三方插件處理文件上傳

如果你想實現異步提交文件,且可以進行批量處理文件,那么只能通過第三方插件來實現了,第三方插件實現技術有很多,比如Flash、java applet、ActiveX等技術,其中Flash技術是運用最廣泛、最成熟的一種方案。

不過第三方插件已經不屬于前端開發范圍了,所以不會詳細細說。不過到時可以我常用的FLash上傳插件有SWFupload、uploadfile、百度的webupload等。

第三方插件的好處是能做批量處理、異步提交。缺點也是顯而易見的是要瀏覽器支持。

模擬異步上傳文件

說到異步,可能有人會說,能不能通過ajax來實現文件的異步上傳呢?想法很美好,現實卻很殘酷,ajax與后端通信 只能傳送字符串,是無法傳遞實體文件的,所以用ajax是無法實現直接文件上傳的。不過我們卻可以在頁面“埋”一個隱藏iframe來模擬文本的異步提交。

具體的原理是,在點擊提交按鈕時,動態的生成一個隱藏iframe加入到頁面上,并且 將form 的 target指向該隱藏iframe,服務端就接收到上傳的file文件,并進行相應的操作,然后將返回結果返回到隱藏的iframe里面,這時我們可以與后端開發約定返回結果的格式,可以是json格式,便于我們前端操作,然后前端部分就可以用iframe.contentWindow.document.body.innerHTML來獲取后端返回的結果,進行相應的parseJSON處理,即可像處理ajax返回的json一樣,處理數據。

示例代碼如下所示:

/**
 * 模擬ajax無刷新文件上傳
 */
var fileUpLoad = function(config) {

    var ifr = null,
        fm = null,
        defConfig = {
            submitBtn: $("#J_submit"), //提交按鈕
            complete: function(response) {}, //上傳成功后回調
            beforeUpLoad: function() {}, //點擊提交未上傳時回調
            afterUpLoad: function() {} //點擊提交上傳后回調
        };

    //靜態變量
    var IFRAME_NAME = "fileUpLoadIframe";

    //配置
    config = $.extend(defConfig, config);

    //綁定submit事件
    config.submitBtn.bind("click", function(e){
        e.preventDefault();

        //點擊提交前觸發事件, 函數返回false可阻止提交表單,用于file為空判斷
        if (config.beforeUpLoad.call(this) === false) {
            return;
        }

        //生成一個隱藏iframe,并設置form的target為該iframe,模擬ajax效果
        ifr = $("");
        fm = this.form;

        ifr.appendTo($("body"));
        fm.target = IFRAME_NAME; //target目標設為ifr

        //上傳完畢iframe onload事件
        ifr.load(function(){
            var response = this.contentWindow.document.body.innerHTML;

            config.complete.call(this, response);
            ifr.remove();
            ifr = null; //清除引用
        });

        fm.submit(); //提交表單

        //點擊提交后觸發事件
        config.afterUpLoad.call(this);

    });

};

調用方式如下:

   fileUpLoad({
    submitBtn: $("#J_submit"),
    complete: function(response){ //上傳成功后處理回調
        var d = $.parseJSON(response);

        alert("返回成功")
        console.log(d);
    },
    beforeUpLoad: function() {
        alert("上傳前");
    },
    afterUpLoad: function() {
        alert("上傳后");
    }
}); 

這種方式的好處是,雖然不是異步提交,但是給人的感覺好像是通過異步方式上傳了文件。缺點是依然不能進行批量處理文件。

使用FormData對象發送文件

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.其兼容性如下所示:

有圖可知,這個接口兼容性在IE上表現的并不是很好,最新只支持IE10+,不過IE10+的市場份額現在還不是很多,如果你考慮兼容性的話,建議不要使用這個接口。

那怎樣通過FormData上傳文件呢。可以參考下面的代碼。
html結構:



Stash the file!

腳本代碼:

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.
"; } }; oReq.send(oData); }

這個屬性彌補了ajax1不能異步上傳文件的不足。

幫助文檔

模擬AJAX無刷新的文件上傳功能
頁面無刷新ajax上傳文件--模擬iframe,超簡單
為什么上傳文件的表單里要加個屬性enctype
FormData接口對象的介紹
使用FormData對象

ps:涉及文章侵權,請郵件告知。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87672.html

相關文章

  • 服務器文件分片合并思考和實踐

    摘要:原文服務器端文件分片合并的思考和實踐筆者在項目中處理大文件上傳的需求,仿照七牛云存儲的接口設計。然而,在服務器端文件合并時遇到了很大的問題合并太慢。服務器端的分片合并現在進入本文的重點。 原文:服務器端文件分片合并的思考和實踐 筆者在項目中處理大文件上傳的需求,仿照七牛云存儲的接口設計。然而,在服務器端文件合并時遇到了很大的問題:合并太慢。本文記錄了當時的思路和解決的方案 大文件的...

    huaixiaoz 評論0 收藏0
  • 淺析前上傳

    摘要:項目上也用到很多上傳文件的地方,七牛云,阿里云,訊飛上傳都接觸過,所以在這里做一個記錄,總結一下前端上傳的幾種方式。類型的文件名七牛云上傳淺析是一個基于七牛開發的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 圖片,音頻,視頻等等這幾種常見的資源類型,如果需要從前端上傳到服務端,有幾種方式呢?不妨回顧一下...

    terro 評論0 收藏0
  • 2016年總結--成長

    摘要:馬爾代夫之行重頭戲這一年的工作情況這一年,個人感覺還是做了不少事情,主要集中在我們公司的前端領域,同時也給整個技術團隊不少的建議,引入了不少新的東西和方式,總結起來比較重要的在下面五個方面。 如果想看技術相關的,下拉到后面的重頭戲就是了。 一個活動頁面 在15年末的時候,加入到羅輯思維,剛過來就接手了一個微信朋友圈要傳播的活動頁面,效果頁面大概和當時錘子手機的活動頁面漂亮的不像實力派類...

    niuxiaowei111 評論0 收藏0

發表評論

0條評論

Jaden

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<