前端匯入外掛：webuploader

webuploader使用：使用Web Uploader檔案上傳需要引入三種資源：JS, CSS, SWF。

其中css檔案、js檔案均可以根據需求修改

前端js:

 function importExcel() {
        var tabId = '';
        var code = '';
        var uploader = WebUploader.create({
            auto: true,

        /*formData: {  //設定傳遞的引數
                page: pageName(),
                code: 'OPFS_RuleArp_Import',
                tabId: ''
            },*/
            server: 'taskDispatch.php',   //後臺處理
            swf: 'assets/plugins/webUploader/Uploader.swf',  //swf檔案路徑
            pick: {   //選擇檔案的按鈕
                id:'#picker',
                multiple: false

            },
            resize: false,  //是否壓縮
            accept: {   //上傳的檔案型別
                title: 'Applications',
                extensions: 'xls',
                mimeTypes: 'application/xls'
            },
            fileNumLimit: 1,
            fileSingleSizeLimit: 10485760,
            duplicate: true     //重複上傳
        });
        uploader.on( 'uploadBeforeSend', function(file, data) {   //上傳開始前
            var tabId = '';   //tab選項卡
            $(".tab-content div").each(function () {
                if($(this).hasClass('active')) {
                    tabId = $(this).attr('id');
                }
            });
            var code = '';
            if (tabId == 'IP黑名單') {
                code="OPFS_RuleIpBl_Import";
            }
            if (tabId == 'IP使用者自定義') {
                code="OPFS_RuleIpAu_Import";
            }
            // 修改data可以控制傳送哪些攜帶資料。
            data.tabId = tabId;
            data.code = code;
            data.page = pageName();
        });
        var $list = $("#thelist");
        uploader.on( 'fileQueued', function(file) {  //上傳檔案佇列
            document.getElementById('fileAddr').value = file.name;
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<p class="state" style="font-size: 14px; text-align: center">等待上傳...</p>' +
                '</div>' );
            $('#closeBtn').attr('disabled',"true");
            uploader.disable();  //上傳過程中，不可再次點選上傳
        });
        uploader.on("uploadAccept", function( file, data) {  //返回是否成功上傳，需要在後臺給出上傳成功與否的標記
            if (data[0] == 0) {
                // for(var j=1, len = data.length; j<len; j++)
                mizhu.alert('提示', data[1]);
                return false;
            } else{
                return true;
            }
        });
        // 檔案上傳過程中建立進度條實時顯示。
        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');
            }
            $('#'+file.id).find('p.state').text('上傳中');
            $percent.css( 'width', percentage*100 + '%' );
            console.log(percentage);
        });
        uploader.on( 'uploadSuccess', function(file) { //上傳成功的回撥函式
            var tabId = '';
            $(".tab-content div").each(function () {
                if($(this).hasClass('active')) {
                    tabId = $(this).attr('id');
                }
            });
            $('#'+file.id).find('p.state').text('已完成');
            if (tabId == 'IP黑名單') {
                refreshBl();
            }
            if (tabId == 'IP使用者自定義') {
                refreshUser();
            }
        });
        uploader.on( 'uploadError', function(file) {
            $('#'+file.id).find('p.state').text('上傳出錯');
        });
        // 完成上傳完了，成功或者失敗，先刪除進度條。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
            setTimeout(function () {
                $('#'+file.id).find('p.state').fadeOut();
            },3000);
            $('#closeBtn').removeAttr("disabled");
        });
        $("#closeBtn").click(function () {
            uploader.destroy();
        });
    }
 

php處理函式

function importExcel($db_keys) {  //$db_keys是資料庫中表格的列
    $len = count($db_keys); 
    $filename = $_FILES['file']['name'];// 檔名
    $tmp_name = $_FILES['file']['tmp_name'];  //臨時檔案路徑
    $extend = strrchr ($filename,'.');
    $extendLower = strtolower($extend);  //檔案字尾
    /*判別是不是.xls檔案*/
    if ($extendLower != ".xls")
    {
        echo '不是.xls檔案，請重新上傳！';
        exit;
    }
    //檔案存放的路徑
    if (!move_uploaded_file($tmp_name, PATH_IMPORT.$filename)) {
        $error = "error|上傳檔案錯誤.";
        exit(0);
    }
    //獲取上傳表格的資料
    $file_path = PATH_IMPORT.$filename;  //自行設定PATH_IMPORT
    $objReader = PHPExcel_IOFactory::createReader('Excel5');
    $objPHPExcel = $objReader->load($file_path );
    $sheet = $objPHPExcel->getSheet();
    $highestRow = $sheet->getHighestDataRow(); // 取得總行數
    $highestColumn_num = PHPExcel_Cell::columnIndexFromString($sheet->getHighestDataColumn()); //列數
    $columns = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O');
    $column_name = array();
    $title = $sheet->getTitle(); //獲取sheet名
    $arr_result = array();
    $dealer_element = array();
    $data = array();
    //在$arr_result的第一個位置放置標誌欄位，1成功執行，0上傳錯誤
    $arr_result[] = 1;
    $dealer_element[0] = 1;

for ($j = 2, $i=1; $j <= $highestRow; $j++, $i++) {
        for ($k = 0; $k < $highestColumn_num; $k++) {

               //讀取單元格
            $value = $objPHPExcel->getActiveSheet()->getCell($columns[$k] . $j)->getValue();//這個就是獲取每個單元格的值
           // $value = trim($value);
            if (empty($value)) {
                $value = NULL;
            }

          $data[$db_keys[$k]] = $value; //$data鍵值對陣列
          $arr_result[$j - 1] = $data;  //$arr_result是下標陣列

}

//此處可進行資料驗證

}

 return  $arr_result;
}
 

xls檔案中的資料已經儲存在 $arr_result中了，只需要呼叫插入函式即可。