Kindeditor-Bild-Upload-Funktion

KindEditor ist ein in Javascript geschriebener Open-Source-Online-HTML-Editor, der es Benutzern ermöglicht, sichtbare und verfügbare Bearbeitungseffekte auf der Website zu erhalten. Mit KindEditor können herkömmliche mehrzeilige Texteingabefelder eingegeben werden. (Textbereich) wird durch ein visuelles Rich-Text-Eingabefeld

mit

1. ersetzt. Gehen Sie zur offiziellen Website, um die neueste Version von KindEditor herunterzuladen, zu entpacken und zu kopieren alle Dateien in den statischen Ordner des Projekts. Beachten Sie, dass die folgenden Verzeichnisse nach Bedarf gelöscht werden können:

• asp – ASP-Programm

• asp.net – ASP.NET-Programm

• php – PHP-Programm

• jsp – JSP-Programm

• Beispiele – Demonstrationsdatei

Fügen Sie das <textarea>-Tag an der Stelle hinzu, an der der Rich-Text-Editor in der HTML-Vorlage angezeigt werden muss:

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

Fügen Sie ein hinzu Skript zum Einführen der KindEditor JS-Datei, erstellt einen Rich-Text-Editor für das angegebene Tag. Hier sprechen wir hauptsächlich über die notwendigen Parameter beim Hochladen von Bildern mit 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>

Beschreibung:

1. Um Bilder hochzuladen, müssen Sie die Upload-URL angeben über den Parameter uploadJson Der Pfadparameter

2. extraFileUploadParams wird zum Senden der CSRF-Überprüfung verwendet

Bild-Upload und Vorschauvorgang :

1. Wählen Sie, um das Bild im Rich-Text-Editor hochzuladen

2. KindEditor Laden Sie das Bild über AJAX auf die vom Server angegebene URL hoch

3. Die dieser URL entsprechende Ansichtsfunktion speichert das Bild und gibt eine JSON-Antwort mit dem Bildserverpfad zurück

4. KindEditor Nach dem Abrufen des Bildpfads von die Antwort, übergeben Sie das <img>-TagsrcAttribut, zeigen Sie das Vorschaubild an

Code-Implementierung in 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))

Beschreibung :

1. request.FILESBildobjekt abrufen

2. imgFile.nameDateinamen abrufen

3. muss zurückgeben, enthaltenderror und url JSON-Antwort

4. Ansichtsfunktion zum Speichern des Bildes definieren

5. Medien konfigurieren (siehe Blog) und Routing definieren

Das obige ist der detaillierte Inhalt vonKindeditor-Bild-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!