JQuery 常用（七）上傳組件

来源:http://www.cnblogs.com/java-class/archive/2016/06/19/4553711.html
-Advertisement-
Play Games

因為有萬惡的 IE 存在，所以當Web項目初始化併進入開發階段時。 如果是項目經理，需要很明確的知道客戶將會用什麼瀏覽器來訪問系統。 明確知道限定瀏覽器的情況下，你才能從容的讓手下的封裝必要的前端組件。 本篇文章試圖從常見的上傳方式和組件進行分析，僅局限與前端，至於後端需依據業務複雜度，自行拿捏實現 ...


    因為有萬惡的IE存在，所以當Web項目初始化併進入開發階段時。

    如果是項目經理，需要知道客戶將會用什麼瀏覽器來訪問系統。

    明確知道限定瀏覽器的情況下，你才能從容的讓手下的封裝必要的前端組件。

    本篇文章試圖從常見的上傳方式和組件進行分析，僅局限與前端，至於後端需依據業務複雜度，自行拿捏實現方式，若文中有紕漏，歡迎拍磚！

1. Input type="file" 也可以性感

    當然你也可以不用任何成熟的上傳組件，表單提交文件，像這樣：

<form action="<%=request.getContextPath()%>/uploadfile" method="POST" enctype="multipart/form-data">  
    yourfile: <input type="file" name="myfiles"/><br/>  
    <input type="submit"/>  
</form>

    多個文件一起提交，添加裡面的 input 選項即可，但 name 名稱需要一致。

    當然你也可以在提交文件的時候，提交一些其他的參數數據上去，像下麵這樣：

<form action="<%=request.getContextPath()%>/uploadfile" method="POST" enctype="multipart/form-data">  
    username: <input type="text" name="username"/><br/>  
    password: <input type="password" name="password"/><br/>  
    yourfile: <input type="file" name="myfiles"/><br/>  
    yourfile: <input type="file" name="myfiles"/><br/>  
    yourfile: <input type="file" name="myfiles"/><br/>  
    <input type="submit"/>  
</form>

    註意其中的 enctype 設置為multipart/form-data。

    這種上傳文件的方式，優缺點顯而易見，不需要使用任何第三方 js，純天然 html 標簽、走到哪用到哪、沒有瀏覽器障礙.....

    對於多變的項目需求，比如這些特性：實時上傳的進度條、能拖拽文件上傳、上傳前壓縮、MD5加密驗證等.....

    你需要耐著性子自己實現，有造好的輪子，你為什麼不用呢？

    所以說這種性感撩人的 <input type="file">  的標簽能出現的項目，定位在小型簡單、客戶好說話的web應用中。

2. Uploadify 雙版本上傳組件

    這個組件想必是用的比較廣泛，提供 Flash 和 HTML5 兩個不同的版本，能讓你避免很多瀏覽器相容性的問題。

    支持顯示文件上傳實時進度條，拖拽文件上傳、多樣化的參數配置、高度可定製化....能滿足絕大部分項目的上傳需求。

    官網地址：http://www.uploadify.com/

    其中 Flash 版是免費下載的，但 HTML5 版本需要掏錢，如果你需要H5  Version，請在評論區留郵箱。

    使用這個組件的前提，需要先引入 Jquery：

<script type="text/javascript" src="/style/js/jquery.js"></script>
<script type="text/javascript" src="/style/js/jquery.uploadify.min.js"></script>
<style type="text/css" src="/style/js/uploadify.css"></style>

<div class="updiv">
    <div class="upfileAfter">
        <a href="javascript:$('#upfileBtn').uploadify('upload','*')">開始上傳</a>
    </div>
    <a href="#" id="upfileBtn">選擇文件</a>
</div>

     初始化組件方法(具體的參數設置和回調函數的入參請查閱官方文檔):

$("#upfileBtn").uploadify({
    'debug': false,// 開啟調試
    'auto': false,// 是否自動上傳
    //'simUploadLimit' : 3,  //併發上傳數量[falsh版不生效]
    //'successTimeout': 30,// 預設值30秒，文件上傳完成時等待伺服器響應的時間，之後顯示成功信息。
    'fileObjName' : 'file',
    'swf': XX+ "/style/js/uploadifynochange/uploadify.swf",
    'uploader': XX + '/service/uploadFile',// 上傳處理程式
    'formData': {'fjzlDm': '', timeStamp: ''},
    'multi': true,// 是否支持多文件上傳
    'width': '95px',// 瀏覽按鈕的寬度
    'height': '30px',// 瀏覽按鈕的高度
    'progressData' : 'speed', //文件進度條的樣式
    'buttonText': '<i class="icon icon-file icon-white"></i> 選擇文件', //按鈕文字
    'fileSizeLimit': '10240',//上傳文件大小限制
    'fileTypeExts': '*.bmp;*.png;*.jpeg;*.jpg;*.gif',//可上傳的文件類型
    'overrideEvents': ['onDialogClose','onUploadSuccess','onUploadError'],
    'onFallback': function () {
        alert("您未安裝FLASH控制項，無法上傳圖片！請安裝FLASH控制項後再試。");// 檢測FLASH失敗調用
    },
    'onDialogClose': function () {
        alert("Dialog  Close......");
    },
    'onUploadSuccess': function (file, data, response) {
        alert("UploadSuccess......");
    },
    'onUploadError' : function () {
        alert("Upload   Error......");
    }
});

   網上有很多上傳組件都是修改 Uploadify 的源碼的某一部分，然後重新命名的。

   這個組件在項目中表現確實不錯，使用 Flash version 瀏覽器中只需要安裝 Flash Player 即可。

   當下瀏覽器中不安裝 Flash Player 的確找不出幾個。

   但不置可否的是 Flash 效率 沒有 H5 的高，相容性和穩定性必須捨棄一部分，讓兩者都有相對最優解。

3. Web Uploader 百度技術團隊開源力作

   Webuploader 是由百度 Fex-team 團隊開發，官網地址：http://fex.baidu.com/webuploader/

   除了 Uploadify 的所有特性，最吸引人的特點是文件可以分片併發上傳、同一組件內部決定使用 Flash 還是 H5 上傳....

   最後出場的一般都是壓軸人物，不否認的是現在我們中項目中使用的就是 Web Uploader 組件。

   不在為瀏覽器的相容性而頻繁更換組件調整代碼，Uploader 會根據運行環境切換上傳的方式，讓你更省心。

<script type="text/javascript" src="/style/js/jquery.js"></script>
<script type="text/javascript" src="/style/js/webuploader.min.js"></script>
<style type="text/css" src="/style/js/webuploader.css"></style>

<div id="uploader" class="wu-example">
    <div id="thelist" class="uploader-list"></div>
    <div class="btns" style="position: relative;display: inline-block">
        <div id="picker"><i class="glyphicon glyphicon-plus"></i>點擊添加文件</div>
        <a href="#" id="up-all">開始上傳</a>
    </div>
</div>

     初始化組件方法(具體的參數設置和回調函數的入參請查閱官方文檔):

var uploader = WebUploader.create({
            // swf文件路徑
            swf:  '/style/js/webuploade/Uploader.swf',
            // 文件接收服務端。
            server: '/service/uploadFile',
            auto: false,
            formData: {
                paramA: 'paramA'
            },
            // 選擇文件的按鈕。可選。
            // 內部根據當前運行是創建，可能是input元素，也可能是flash.
            pick: '#picker'
        });

        $("#up-all").on("click",function(){
            uploader.upload();
        });
        // 當有文件被添加進隊列的時候
        uploader.on('fileQueued', function (file) {
            $("#thelist").append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上傳...</p>' +
                    '</div>');
        });

        // 文件上傳過程中創建進度條實時顯示
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

            // 避免重覆創建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上傳中');
            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上傳出錯');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('startUpload', function () {
            uploader.option('formData', {'paramA': ''});
        });
View Code

    Uploadify 和 Uploader 都可以動態的添加表單參數。

    個人偏向於喜歡百度的這款 Uploader，但仁者見仁智者見智，多幾種選擇未嘗不是好事情。

    還需要註意的是，在實現獲取上傳文件的過程中，我發現只有表單提交上去的多文件是在一次請求當中。

    而 Uploadify 和 Uploader 都是點擊全部上傳後，多次請求後端的 Action,每次只攜帶一個文件。

    請求次數等於你的文件上傳次數，我在實現過程中是通過添加時間戳的方式解決的該問題。

    也有可能是我使用的有問題，文件上傳後肯定需要和具體的業務掛鉤，業務問題這裡就不贅述了。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 設計開篇
    1 設計模式 類是我們面向對象編程的承載工具，可以說是面向對象的起點。 設計模式，這種算面向對象的進化。按照gof設計模式的分類 設計模式分為：創建型，結構型，行為型。 其中創建型主要和類的創建有關 結構性組織擴展類和類之間的關係 行為型主要擴展的類的訪問 這三個對應到類上 創建型模式對應的是構造函 ...
  • JavaScript中數組的增刪改查
    數組的增加 ary.push() 向數組末尾添加元素，返回的是添加後新數組的長度，原有數組改變 ary.unshift() 向數組開頭添加元素，返回的是添加後新數組的長度，原有數組改變 var ary=[1,2,3,4]; var res=ary.unshift(6); console.log(re ...
  • 目前最小的模板了，只有十幾行代碼
    先上代碼，下麵是使用例子。 上面是HTML代碼，下麵是調用方法。 調用方法很簡單吧！ 再來一個處理多行數據的例子。 data2={"data":[{"帳號":"yeruzhao1","name":"葉如兆","avatar":"http:\/\/shp.qpic.cn\/bizmp\/3eJCszw ...
  • 遇到的瀏覽器相容問題及應對方法
    前言： 上周天的時候有個學長找我幫忙做三張頁面，因為沒有數據交換之類的，只是單純的前端頁面，想著好久沒做東西， 看書都看煩了，所以就接了也當是練手。之前因為沒有系統的看書，所以其實很多問題都考慮的不全面，屬於知其然不知其所以然的狀態，雖然現在也還有很多要學的東西，但是知道自己的不足總比不知道強吧？而 ...
  • javaScript系列：js中獲取時間new Date()詳細介紹
    var myDate = new Date();myDate.getYear(); //獲取當前年份(2位)myDate.getFullYear(); //獲取完整的年份(4位,1970-????)myDate.getMonth(); //獲取當前月份(0-11,0代表1月)myDate.getDa ...
  • 基於CSS3新屬性Animation及transform實現類似翻書效果
    註：本實例JS部分均以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫 先上效果圖：（樣式有點醜，可以忽略一下下，效果出來了就好，後期加到其他項目中方便更改0.0） 類似翻書效果，原本的意思是使用JS來控制的，點擊一次之後使用setInterval去控制書頁翻過去的動畫，當書頁翻轉1 ...
  • indexedDB bootstrap angularjs之 MVC Demo
    前端之MVC應用 1、indexedDB（Model） -- 前端瀏覽器對象型資料庫，一般我們後臺用的資料庫都是關係型資料庫。那麼indexeddb有什麼特點呢： 首先，從字義上它是索引型資料庫，從實際使用中可以體現為，它需要為表創建索引才可以根據某個欄位來獲取數據，而在關係型資料庫中，這明顯是不需 ...
  • zepto源碼研究 - callback.js
    簡要：$.Callbacks是一個生成回調管家Callback的工廠，Callback提供一系列方法來管理一個回調列表($.Callbacks的一個私有變數list)，包括添加回調函數， 刪除回調函數等等...,話不多說看正文： memory的值由傳入$.Callbacks的形參對象決定，具有狀態記 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類