ホームページ バックエンド開発 C#.Net チュートリアル asp.net core は kindeditor を統合して画像アップロード機能を実装します

asp.net core は kindeditor を統合して画像アップロード機能を実装します

Dec 20, 2016 pm 02:29 PM

この記事では、asp.net core が kindeditor を統合し、画像アップロード機能を実装する具体的な方法を共有します。具体的な内容は次のとおりです

準備

1.visual Studio 2015 update3 開発環境

2. net core 1.0 .1 以降のバージョン

ディレクトリ

新しい asp.net core Web プロジェクト

kindeditor をダウンロード

画像アップロード コントローラーを追加

kindeditor パラメーターを構成する

コードのダウンロード

新しい asp.net core Web プロジェクト

新しい asp.net core プロジェクトを作成します。ここでは kindeditor という名前を付けます

asp.net core集成kindeditor实现图片上传功能

Web アプリケーションを選択します

asp.net core集成kindeditor实现图片上传功能

kindeditor をダウンロードします

ここでは、システムに付属する新しいサンプル プロジェクトを作成しました。kindeditor 公式にアクセスしてください。 Web サイトでバージョンをダウンロードし、解凍してコピーします。大きな wwwroot

asp.net core集成kindeditor实现图片上传功能

で、views/index.cshtml

@{
 ViewData["Title"] = "Home Page";
}
<link href="~/kindeditor/themes/default/default.css" rel="stylesheet" />
<script src="~/kindeditor/kindeditor-min.js"></script>
<script src="~/kindeditor/lang/zh_CN.js"></script>
  
<div class="row">
 <textarea id="detail_desc" name="detail_desc" style="width:700px;height:300px;">
   
 </textarea> 
</div>
<script type="text/javascript">
 //实例化编辑器
 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(&#39;editor&#39;)就能拿到相关的实例
 KindEditor.ready(function (K) {
  window.editor = K.create(&#39;#detail_desc&#39;, {
   width: &#39;98%&#39;,
   height: &#39;500px&#39;
  });
 }); 
</script>
ログイン後にコピー

を変更して実行すると、kindeditor が統合されていることがわかります。

画像アップロードコントローラーを追加します

戻り値は json オブジェクトであるため、単純なオブジェクトの戻り値が構築されることに注意してください。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using Microsoft.Net.Http.Headers;
using Microsoft.AspNetCore.Hosting;
using System.IO;
namespace kindeditortest.Controllers
{
 public class HomeController : Controller
 {
  private IHostingEnvironment hostingEnv;
  public IActionResult Index()
  {
   return View();
  }
  public HomeController(IHostingEnvironment env)
  {
   this.hostingEnv = env;
  }
  /// <summary>
 /// Kindeditor图片上传
  /// </summary>
 /// <param name="imgFile">Kindeditor图片上传自带的命名,不可更改名称</param>
 /// <param name="dir">不可更改名称 这里没有用到dir</param>
 /// <returns></returns>
 public IActionResult KindeditorPicUpload(IList<IFormFile> imgFile, string dir)
  {
   PicUploadResponse rspJson = new PicUploadResponse() { error = 0, url = "/upload/" };
   long size = 0;
   string tempname = "";
   foreach (var file in imgFile)
   {
    var filename = ContentDispositionHeaderValue
        .Parse(file.ContentDisposition)
        .FileName
        .Trim(&#39;"&#39;);
    var extname = filename.Substring(filename.LastIndexOf("."), filename.Length - filename.LastIndexOf("."));
    var filename1 = System.Guid.NewGuid().ToString() + extname;
    tempname = filename1;
    var path = hostingEnv.WebRootPath;
    filename = hostingEnv.WebRootPath + $@"\upload\{filename1}";
    size += file.Length;
    using (FileStream fs = System.IO.File.Create(filename))
    {
     file.CopyTo(fs);
     fs.Flush();
     //这里是业务逻辑
    }
   }
   rspJson.error = 0;
   rspJson.url = $@"../../upload/" + tempname;
   return Json(rspJson);
  }
  public IActionResult About()
  {
   ViewData["Message"] = "Your application description page.";
   return View();
  }
  public IActionResult Contact()
  {
   ViewData["Message"] = "Your contact page.";
   return View();
  }
  public IActionResult Error()
  {
   return View();
  }
 }
 public class PicUploadResponse
 {
  public int error { get; set; }
  public string url { get; set; }
 }
}
ログイン後にコピー

kindeditorパラメータの設定

<script type="text/javascript">
 //实例化编辑器
 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(&#39;editor&#39;)就能拿到相关的实例
 KindEditor.ready(function (K) {
  window.editor = K.create(&#39;#detail_desc&#39;, {
   width: &#39;98%&#39;,
   height: &#39;500px&#39;,
   uploadJson: &#39;/home/KindeditorPicUpload&#39;,
   fileManagerJson: &#39;/home/KindeditorPicUpload&#39;,
   allowFileManager: true
  });
 });
</script>
ログイン後にコピー

操作効果

asp.net core集成kindeditor实现图片上传功能

以上がこの記事の全内容であり、皆さんの学習に役立つことを願っています。 PHP中国語ウェブサイト。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

次のレベルのCコンパイラを追加する方法 次のレベルのCコンパイラを追加する方法 Mar 03, 2025 pm 05:44 PM

この記事では、printf内の\ nエスケープシーケンスを使用してcで新しいライン文字を作成し、関数を置く方法について説明します。 機能を詳しく説明し、出力のラインブレークに使用することを示すコード例を提供します。

C言語のnullの代替案は何ですか C言語のnullの代替案は何ですか Mar 03, 2025 pm 05:37 PM

この記事では、CのNull Poernter recerferenceの課題を調査します。問題は、問題はnullではなく、その誤用であると主張しています。 記事では、参照前のチェック、ポインターInitialiなど、非参照を防止するためのベストプラクティスの詳細

どの言語コンパイラが優れていますか? どの言語コンパイラが優れていますか? Mar 03, 2025 pm 05:39 PM

この記事は、Cコンパイラの選択に関する初心者を案内しています。 GCCは、使いやすさ、幅広い可用性、広範なリソースが初心者に最適であるため、最適であると主張しています。 ただし、GCC、Clang、MSVC、およびTCCも比較して、その違いを強調しています

nullは、C言語での最新のプログラミングではまだ重要ですか? nullは、C言語での最新のプログラミングではまだ重要ですか? Mar 03, 2025 pm 05:35 PM

この記事では、現代のCプログラミングにおけるNullの継続的な重要性を強調しています。 進歩にもかかわらず、Nullは明示的なポインター管理にとって重要なままであり、有効なメモリアドレスがないことをマークすることにより、セグメンテーションの障害を防ぎます。 最高のPRAC

C言語コンパイラのWebバージョンは何ですか? C言語コンパイラのWebバージョンは何ですか? Mar 03, 2025 pm 05:42 PM

この記事では、初心者向けのオンラインCコンパイラをレビューし、使いやすさとデバッグ機能に焦点を当てています。 OnlineGDBとRepl.itは、ユーザーフレンドリーなインターフェイスと役立つデバッグツールのために強調表示されます。 プログラムやコンパイルなどのその他のオプション

C言語コンパイラによるコードをコピーする方法 C言語コンパイラによるコードをコピーする方法 Mar 03, 2025 pm 05:43 PM

この記事では、C IDEでの効率的なコードコピーについて説明します。 コピーはコンパイラ機能ではなくIDE機能であり、IDE選択ツールの使用、コード折りたたみ、検索/交換、テンプラなど、効率を向上させるための詳細戦略であることを強調しています。

c言語オンラインプログラミングウェブサイトc言語コンパイラ公式ウェブサイトの要約 c言語オンラインプログラミングウェブサイトc言語コンパイラ公式ウェブサイトの要約 Mar 03, 2025 pm 05:41 PM

この記事では、オンラインCプログラミングプラットフォームを比較し、デバッグツール、IDE機能、標準コンプライアンス、メモリ/実行の制限などの機能の違いを強調しています。 「最良の」プラットフォームはユーザーのニーズに依存していると主張しています。

c言語コンパイラインストールチュートリアル(コンピューターバージョン) c言語コンパイラインストールチュートリアル(コンピューターバージョン) Mar 03, 2025 pm 05:41 PM

このチュートリアルは、Windows、MacOS、LinuxにCコンパイラをインストールすることでユーザーをガイドします。 人気のコンパイラ(MINGW、Visual Studio、XCode、GCC)のインストールを詳述し、環境可変構成を説明し、トラブルシューティング手順を提供します

See all articles