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

閱讀目錄

• 1. Input type="file" 也能夠性感
• 2. Uploadify 雙版本上傳組件
• 3. Web Uploader 百度技術團隊開源力做

    由於有萬惡的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>

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

  View Code

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

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

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

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

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

    也有多是我使用的有問題，文件上傳後確定須要和具體的業務掛鉤，業務問題這裏就不贅述了。