文件上傳的幾種方法——webuploader篇

時間 2019-11-09

標籤文件上傳幾種方法 webuploader 简体版

原文原文鏈接

原本想把這幾種方法放在同一篇寫的，寫完xhr，已經很長了，想一想仍是分開的比較好。
webuploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5爲主,FLASH爲輔的現代文件上傳組件。它的兼容性很好，兼容IE6+，IOS6+，Android4+。因爲作的系統都要兼容IE8，在用webuploader以前，換過了好幾個組件，都沒法知足需求，好比uploadify沒法在header裏面添加token（需求其實很簡單，不能隨便拿個組件來用，我嘛很絕望）話說，其實一開始就有試着用webuploader，可是因爲某網站上的demo裏面的js文件有問題，會報錯（當時項目趕啊，着急啊，就放棄了，後面問了一下獅虎，獅虎也是用webuploader，我就跑官網去下載，就能夠了！）果真仍是官網靠譜！順便提一下，用webuploader這個項目，文件上傳是上傳到本身的服務器，不是上傳七牛。php

先上代碼，這個代碼是用在項目裏面以前，寫的一個小demo，參數不齊全。。。（webuploader使用起來很簡單，api也很詳細，去官網看一下就能夠上手了）css

<html style="padding-bottom: 54px;">
<head>
    <meta charset="UTF-8">
    <title>Upload</title>
    <link href="css/webuploader.css" rel="stylesheet">
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用來存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">選擇文件</div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script src="js/webuploader.js"></script>
<script src="js/test.js"></script>

</body>
</html>

(function () {
    var uploader = WebUploader.create({

        // swf文件路徑
        swf: 'js/Uploader.swf',

        // 文件接收服務端。
        server: 'uploadify.php', // 由於是demo，就拿着uploadify的php來用一下

        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是建立，多是input元素，也多是flash.
        pick: '#picker',

        // 不壓縮image, 默認若是是jpeg，文件上傳前會壓縮一把再上傳！
        resize: false,
        auto: true,
        headers: {'userName': 'emi', 'token': '123456'}
    });
// 當有文件被添加進隊列的時候，添加到頁面預覽
    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( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('已上傳');
    });

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

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

項目過程當中，我也遇到了一個很廣泛的問題（雖然上面代碼裏面沒有這個參數，這個參數是指定接受哪些類型的文件），就是文件夾打開特別慢，網上找了一下html

accept: {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/*'
}

改爲這樣就能夠了，親測有效~jquery

accept: {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/jpg,image/jpeg,image/png'   //修改位置
}

能夠經過upload對象改參數值，好比uploader.options.server = '服務器路徑'。也能夠重寫上傳事件。web

若是不自動上傳的話，能夠經過upoloader.upload()觸發。api

感受webuploader真心用得順風順水，沒遇到什麼問題。實在憋不出什麼來。服務器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。