Heim >Web-Frontend >js-Tutorial >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
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 4750256ae76b6b9d804861d8f69e79d3
-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:
Um Bilder hochzuladen, müssen Sie die Upload-URL angeben über den Parameter uploadJson
Der Pfadparameter
extraFileUploadParams
wird zum Senden der CSRF-Überprüfung verwendet
Bild-Upload und Vorschauvorgang :
Wählen Sie, um das Bild im Rich-Text-Editor hochzuladen
KindEditor Laden Sie das Bild über AJAX auf die vom Server angegebene URL hoch
Die dieser URL entsprechende Ansichtsfunktion speichert das Bild und gibt eine JSON-Antwort mit dem Bildserverpfad zurück
KindEditor Nach dem Abrufen des Bildpfads von die Antwort, übergeben Sie das a1f02c36ba31691bcfe87b2722de723b
-Tagsrc
Attribut, 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 :
request.FILES
Bildobjekt abrufen
imgFile.name
Dateinamen abrufen
muss zurückgeben, enthaltenderror
und url
JSON-Antwort
Ansichtsfunktion zum Speichern des Bildes definieren
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!