# jquery fileinput圖片上傳
:::success

:bookmark: 書籤

[TOC]

:::

# github
| 標題 | 網址 |
| --- | --- |--- |
|fileinput github|https://github.com/kartik-v/bootstrap-fileinput|

---
# 基本引入
## 效果圖
## CSS Link

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/fileinput/fileinput.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/fileinput/fileinput.min.css">

## Javascript

<script src="<?php echo base_url(); ?>assets/js/fileinput/fileinput.js"></script>
<script src="<?php echo base_url(); ?>assets/js/fileinput/fileinput.min.js"></script>

# 基本佈置
## CSS設定

[title=縮放] , [title=全屏] , [title=無邊界模式] , [title=關閉當前預覽]{
    background-color: #146faf;
    border-color: #fff;
    border-radius: 3px;
}

[title=縮放]:hover , [title=全屏]:hover , [title=無邊界模式]:hover , [title=關閉當前預覽]:hover{
    background-color: #2b7db7;
    border-color: #f2f2f2;
    border-radius: 3px;
}

[title=縮放]:active , [title=全屏]:active , [title=無邊界模式]:active , [title=關閉當前預覽]:active{
    background-color: #2b7db7;
    border-color: #f2f2f2;
    border-radius: 3px;
}

## 基本上傳按鈕

<input type="file" lass="file input-lg" id="setFile" name="setFile[]" value="發布" multiple>

## fileinput參數設定說明

$("#setFile").fileinput("upload");//上傳圖片


$("#setFile").fileinput({
    language: "zh-TW",/* 設定語言 */
    uploadAsync: false,/* 上傳同步true/非同步false */
    uploadUrl: "<?php echo base_url(); ?>accident/setFile",/* 請求上傳方法路徑 */
    /*  showXXX就是顯是哪種按鈕
        zoom=放大縮小
        close=關閉
        upload=上傳
    */
    showZoom: false,
    showClose: false,
    showUpload: false,
    fileActionSettings: {/* 是否在預覽圖上面顯示什麼按鈕 */
        showUpload: false,
        showDrag: false
    },
    maxFileCount: 5,/* 最大上傳檔案個數 */
    removeClass: "btn btn-warning",/* 移除按鈕樣式 */
    maxFileSize: 20480,/* 最大上傳檔案容量大小(KB) */
    dropZoneEnabled: false,/* 是否啟用將檔案拖放到的拖放區 */
    previewSettings: {/* 上傳檔案模板大小 */
        image: {width: "160px", height: "120px"},
        html: {width: "160px", height: "120px"},
        text: {width: "160px", height: "120px"},
        video: {width: "160px", height: "120px"},
        audio: {width: "160px", height: "120px"},
        flash: {width: "160px", height: "120px"},
        object: {width: "160px", height: "120px"},
        pdf: {width: "160px", height: "120px"},
        other: {width: "160px", height: "120px"}
    },
    allowedFileExtensions: allow_type,/* 接收的副檔名格式 ex  ['jpg', 'gif', 'png'] */
    allowedPreviewTypes : null,
    allowedPreviewMimeTypes:["image/bmp","image/jpeg","image/png","image/gif","application/pdf","text/plain","text/csv"],
    previewFileIconSettings: {
        "doc": "<i class='fa fa-file-word-o text-success'></i>",
        "xls": "<i class='fa fa-file-excel-o text-info'></i>",
        "ppt": "<i class='fa fa-file-powerpoint-o text-danger'></i>",
        "zip": "<i class='fa fa-file-archive-o'></i>"
    },
    previewFileExtSettings: {
        "doc": function(ext) {
            return ext.match(/(doc|docx)$/i);
        },
        "xls": function(ext) {
            return ext.match(/(xls|xlsx)$/i);
        },
        "ppt": function(ext) {
            return ext.match(/(ppt|pptx)$/i);
        },
        "zip": function(ext) {
            return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
        }
    }
}).on("filebatchuploadsuccess", function(event, data, previewId, index) {/* 上傳成功後回調函式 */
   /* 動作敘述 */
}).on("change", function(event) {/* 當有檔案上傳時 */
    var file_ch = $("#setFile")[0].files;
    for (var i = 0 ; i < file_ch.length ; i++) {
        var file_type = /[^.]+$/.exec(file_ch[i].name)[0];
        if(file_ch[i].size > 20971520 || allow_type.indexOf(file_type) == -1){
            /* 動作敘述 */
        }
    }
}).on("filecleared", function(event) {/* 清空文件後做的動作 */
    /* 動作敘述 */
});

## CI3上傳範例

/**
 * [批次上傳附件]
 * @return [type] [description]
 */
function setFile(){
    if (empty($_FILES["setFile"])) {/* 如果空就回傳找不到檔案 */
        echo json_encode(["error" => "找不到檔案"]);
        return;
    } else {
        for($i = 0; $i < count($_FILES["setFile"]["name"]); $i++){
            $_FILES["tempFile"]["name"] = $_SESSION["username"]."_".preg_replace("/[\-\[\]\/\{\}:;#%=\(\)\*\+\?\\\\^\$\|<>&\"\' ]/", "_" , $_FILES["setFile"]["name"][$i]);
            $_FILES["tempFile"]["type"] = $_FILES["setFile"]["type"][$i];
            $_FILES["tempFile"]["tmp_name"] = $_FILES["setFile"]["tmp_name"][$i];
            $_FILES["tempFile"]["error"] = $_FILES["setFile"]["error"][$i];
            $_FILES["tempFile"]["size"] = $_FILES["setFile"]["size"][$i];
            $config["file_name"] = iconv(mb_detect_encoding($_FILES["tempFile"]["name"]), "UTF-8//Ignore", $_FILES["tempFile"]["name"]);/* 設定編碼 */
            $config["max_size"]  = 20480;/* 上傳檔案大小限制 */
            $config["detect_mime"] = true;
            $config["upload_path"] = "./uploads/";/* 上傳路徑 */
            $config["allowed_types"] = "bmp|jpg|png|gif|pdf|txt|csv|doc|docx|xls|xlsx|ppt|pptx|zip|rar|tar|gzip|gz|7z";/* 限制上傳格式 */
            $this->load->library("upload", $config);/* CI3檔案上傳lib */
            $this->upload->initialize($config);
            if($this->upload->do_upload("tempFile")){/* 檔案上傳 */
                $output = [];
                $type = "";
                switch ($_FILES["tempFile"]["type"]) {
                    case (preg_match("/^image/",$_FILES["tempFile"]["type"]) ? true : false):
                        $type = "image";
                        break;
                    case "application/pdf":
                        $type = "pdf";
                        break;
                    case (preg_match("/^text/",$_FILES["tempFile"]["type"]) ? true : false):
                        $type = "text";
                        break;
                    default:
                        $type = "object";
                        break;
                }
                /* 上傳資料庫動作 
                 * @param  [file_name] [type]
                 */
            } else {
                $output = ["error" => "處理上傳失敗 ".$this->upload->display_errors()];
            }
        }
        echo json_encode($output);
    }
}