kindeditor圖片上傳功能

KindEditor是一款用Javascript編寫的開源線上HTML編輯器，主要使用者是讓使用者在網站上獲得可見即可得的編輯效果，開發人員可以用KindEditor 把傳統的多行文字輸入框(textarea)替換為視覺化的富文本輸入框

使用

1. 到官網下載KindEditor 最新版本，解壓縮後將所有檔案拷貝到專案的static文件夾下。注意，可以根據需要刪除以下目錄：

• asp - ASP程式

• asp.net - ASP.NET程式

• php - PHP程式

• jsp - JSP程式

• examples - 示範檔案

HTML範本中需要顯示富文本編輯器的位置新增<textarea></textarea>標籤：

<label for="article_body">文章内容</label><textarea id="article_body" name="article_body"></textarea>

##新增腳本，引入KindEditor  JS文件，為指定標籤建立富文本編輯器。這裡主要說使用KindEditor  上傳圖片時的必要參數：

<script src="{% static &#39;kindeditor-4.1.10/kindeditor-all-min.js&#39; %}"></script><script>
    var options = {
        resizeType: 0,
        uploadJson: "/upload/", //指定图片上传的url路径，server端写一个视图来处理上传的图片
        extraFileUploadParams: {            "csrfmiddlewaretoken": "{{ csrf_token }}"
        }
    };
    KindEditor.create("#article_body", options); //为指定元素创建富文本编辑器</script>

說明：

1. 圖片上傳要透過

   uploadJson參數指定上傳的url路徑

2. extraFileUploadParams參數用於提交csrf驗證

圖片的上傳和預覽流程：

1. 在富文本編輯器中選擇上傳圖片

2. #KindEditor  將圖片透過AJAX的方式上傳至伺服器指定url

3. 此url對應的視圖函數儲存圖片，並傳回包含圖片伺服器路徑的json回應

4. KindEditor  拿到回應的圖片路徑後，透過

   標籤的src屬性，顯示預覽圖片

Django中的程式碼實作：

from django.conf.urls import urlfrom app import views

urlpatterns = [
    url(r'^upload/$', views.upload_file, name='upload_file'),

    url(r&#39;^media/(?P<path>.*)$&#39;, serve, {&#39;document_root&#39;: settings.MEDIA_ROOT}),  # 配置media路由]

def upload_file(request):
    # 拿到文件，保存在指定路径
    print(request.FILES) # {&#39;imgFile&#39;: [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]}
    imgFile = request.FILES.get(&#39;imgFile&#39;)  # 拿到文件对象，imgFile.name, 拿到文件名

    with open(&#39;app01/media/upload/img/&#39;+imgFile.name,&#39;wb&#39;)as f:   # with open 无法创建文件夹，需要自己创建
        for chunk in imgFile.chunks():
            f.write(chunk)    # 返回json响应
    response = {        
    &#39;error&#39;: 0,        &#39;url&#39;: &#39;/media/upload/img/&#39;+imgFile.name        # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
    }    return HttpResponse(json.dumps(response))

說明：

1. request.FILES中拿到圖片物件

2. #imgFile. name拿到檔案名稱

3. 必須回傳包含

   error和url的json回應

4. 定義儲存圖片的視圖函數

5. 配置media（參考部落格）並定義路由

以上是kindeditor圖片上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！