kindeditor圖片上傳功能

使用

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

2. asp - ASP程序

3. asp.net - ASP.NET程序

4. php - PHP程序

5. jsp - JSP程序

6. examples - 演示文件

7. HTML模板中需要顯示富文本編輯器的位置添加<textarea>標簽：

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

8. 添加腳本，引入KindEditor JS文件，為指定標簽創建富文本編輯器。這里主要說使用KindEditor 上傳圖片時的必要參數：

   <script src="{% static 'kindeditor-4.1.10/kindeditor-all-min.js' %}"></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驗證

9. 圖片的上傳和預覽流程：

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

2. KindEditor 將圖片通過AJAX的方式上傳到服務器指定url

3. 該url對應的視圖函數保存圖片，并返回包含圖片服務器路徑的json響應

4. KindEditor 拿到響應的圖片路徑后，通過<img>標簽的src屬性，顯示預覽圖片

10. Django中的代碼實現：

    from django.conf.urls import urlfrom app import views
    
    urlpatterns = [
     url(r'^upload/$', views.upload_file, name='upload_file'),
    
     url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), # 配置media路由]

    def upload_file(request):
     # 拿到文件，保存在指定路徑
     print(request.FILES) # {'imgFile': [<InMemoryUploadedFile: QQ圖片20170523192846.jpg (image/jpeg)>]}
     imgFile = request.FILES.get('imgFile') # 拿到文件對象，imgFile.name, 拿到文件名
    
     with open('app01/media/upload/img/'+imgFile.name,'wb')as f: # with open 無法創建文件夾，需要自己創建
     for chunk in imgFile.chunks():
     f.write(chunk) # 返回json響應
     response = { 
     'error': 0, 'url': '/media/upload/img/'+imgFile.name # 客戶端拿到路徑，才能預覽圖片; media在setting中配置了別名，這里只寫media，客戶端就可以找到路徑，前面不需要加/app
     } return HttpResponse(json.dumps(response))

    說明：

1. request.FILES中拿到圖片對象

2. imgFile.name拿到文件名

3. 必須返回包含error和url的json響應

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

5. 配置media（參考博客）并定義路由

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com