web 前端常用組件【06】Upload 控件

    因為有萬惡的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': ''});
        });

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

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

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

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

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

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