---
title: CKFinder 3.5.1.2 搭配 MVC 從零開始安裝教學
tags: 程式設計,筆記
description: 安裝教學
---

# CKFinder 3.5.1.2 搭配 MVC 從零開始安裝教學
## 前言
鑒於市場針對CKFinder的安裝介紹甚少，今天就開一篇文章介紹最近工作上會用到的CKFinder安裝較城，因此建立一份筆記供大家參考。
> 官方網站 https://ckeditor.com/docs/ckfinder/ckfinder3/
> [color=#a0c92e]

> [color=#ff0000] 心理OS官方沒有完整教學，那就自己來寫...
>

## 1. 平台介紹
:::info
<font> 1.安裝平台 Visual Studio 2019</font>
<font> 2.安裝語言 C# .NET Framework 4.7.2 + MVC</font>
<font> 3.安裝CKFinder 3.5.1.2</font>
:::

## 2. 安裝步驟 Step By Step

### I. 開專選擇上述的版本

<details class="part" data-startline="30" data-endline="32" data-position="495" data-size="117"><summary>安裝詳細設定</summary>
<p data-position="511" data-size="0"><span data-position="511" data-size="14">(1) 專案設定，使用基本 </span><img src="https://i.imgur.com/bYEONoK.png" alt="" class="" data-position="525" data-size="36"><br>
<span data-position="562" data-size="10">(2) 選擇MVC </span><img src="https://i.imgur.com/je041ad.png" alt="" class="" data-position="572" data-size="36"></p>
</details>

<br></br>

### II. 開啟NuGet套件管理員的主控台 (點圖可以開)

<div class="flex">
<div style="margin:10px">
<a href="https://i.imgur.com/NuTVibt.png" target="_blank"><img src="https://i.imgur.com/NuTVibt.png" style="width:400px"></img></a>
</div>
<div style="margin:10px">
<a href="https://i.imgur.com/VWG218V.png" target="_blank"><img src="https://i.imgur.com/VWG218V.png" style="width:400px"></img></a>
</div>
</div>

:::success
輸入安裝訊息 <font><i class="fa fa-caret-right"></i> Install-Package CKSource.CKFinder.Connector.Sample -Version 3.4.1</font>
:::

### III. 安裝完3.4.1版後先來試試看可不可以執行，點選ckfinder.html後測試可否執行
<div class="flex">
<div style="margin:10px">
<a href="https://i.imgur.com/AN3eN1Q.png" target="_blank"><img src="https://i.imgur.com/AN3eN1Q.png" style="width:300px"></img></a>
</div>
<div style="margin:10px">
<a href="https://i.imgur.com/5j7JpNU.png" target="_blank"><img src="https://i.imgur.com/5j7JpNU.png" style="width:200px"></img></a>
</div>
</div>
<br></br>

### IV. 看來沒有想像中的順利，出錯了顯示與System.Net.Http.Formatting 5.2.7版衝突

<a href="https://i.imgur.com/MkT48gp.png" target="_blank"><img src="https://i.imgur.com/MkT48gp.png"></img></a>

### V. 確認套件安裝狀態，確實安裝5.2.7版...經過小弟測試，將AspNet.WebApi.Client降板為5.2.3就可以正常執行...

<div class="flex">
<div style="margin:10px">
<a href="https://i.imgur.com/TnTAY8h.png" target="_blank"><img src="https://i.imgur.com/TnTAY8h.png" style="width:400px"></img></a>
</div>
<div style="margin:10px">
<a href="https://i.imgur.com/21NXJtc.png" target="_blank"><img src="https://i.imgur.com/21NXJtc.png" style="width:400px"></img></a>
</div>
</div>

:+1:
### <font><i class="fa fa-angle-double-right"></i>VI. 安裝完後再次執行，順利執行畫面如下<i class="fa fa-angle-double-left"></i></font>
<div style="margin:10px">
<a href="https://i.imgur.com/D1gdffF.png" target="_blank"><img src="https://i.imgur.com/D1gdffF.png"></img></a>
</div>

### VII. 接下來就把可以升級的全部升級 目標<font color="red"> CKFinder 3.5.1.2</font>，全部手動升級 "GG"
<div class="flex text-center">
<div style="margin:10px">
<a href="https://i.imgur.com/zQ6WwH3.png" target="_blank"><img src="https://i.imgur.com/zQ6WwH3.png"></img></a>
<br></br>
<a>升級前</a>
</div>
<div style="margin:10px">
<a href="https://i.imgur.com/fq5RpQg.png" target="_blank"><img src="https://i.imgur.com/fq5RpQg.png"></img></a>
<a>升級完成</a>
</div>
</div>

## 3.系統設定
### Web.Config設定解說 [這裡只擷取重要訊息]
#### A.在這裡填入購買的License
<font color="red">沒錯CKFinder是要用錢買的,Demo版本上傳檔案是沒有問題的但是不能刪除</font>

 <ckfinder overwriteOnUpload="false" checkDoubleExtension="true" disallowUnsafeCharacters="false" secureImageUploads="true" checkSizeAfterScaling="true" xmlns="https://cksource.com/ckfinder-net/schema/CKFinderConnector.xsd">
    <license name="" key="" />       

#### B.檔案上傳路徑
其中root是上傳跟目錄底下的資料夾
baseUrl是檔案上傳後回傳的路徑，官方自帶的如下

      <backend name="default" adapter="local">
        <option name="root" value="userfiles" />
        <option name="baseUrl" value="/ckfinder/userfiles/" />
      </backend>
    </backends>
    

#### C.設定允許上傳路徑下的檔案格式 (這裡就不多做解說了)

    <resourceTypes>
      <resourceType name="Files" folder="files" allowedExtensions="7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip" backend="default" />
      <resourceType name="Images" folder="images" allowedExtensions="bmp,gif,jpeg,jpg,png" backend="default" />
    </resourceTypes>
</ckfinder>

## 4.使用測試

### I.試傳檔案

#### (1)照片

<font>確認可以傳送沒問題</font>
<div style="margin:10px">
<a href="https://i.imgur.com/zftUN1K.png" target="_blank"><img src="https://i.imgur.com/zftUN1K.png"></img></a>
</div>

#### (2)一般檔案
<font></font>
<div style="margin:10px">
<a href="https://i.imgur.com/oMiQzN3.png" target="_blank"><img src="https://i.imgur.com/oMiQzN3.png"></img></a>
</div>

## 5.Demo版本使用限制
### A.每5分鐘提示

### B.不可刪除檔案