ASP .Net mvc 使用wangEditor富文本框插件 ，服务器图片上传删除功能

ASP .Net mvc 使用wangEditor富文本框插件 ，服务器图片上传删除功能

html代码：

<div class="newsTitle" style="border:1px solid grey; width:700px;margin-left:17%;height:400px;">
	<div class="editorMenu" id="newsMenu" style="border-bottom:1px solid grey;"></div>
	<div class="editor" id="newseditor" style="height:350px;"></div>
</div>

js代码：

var editor1 = "";
//初始化富文本框
function initEditor(menuID, editorID) {
    var E = window.wangEditor;
    editor1 = new E('#newsMenu', '#newseditor');
    editor1.customConfig.uploadImgServer = '/Common/UploadPic/';
    //删除图片功能
    editor1.customConfig.onchange = function (html) {this.onchange(html)}.bind(this)
    //开启wangEditor的错误提示
    editor1.customConfig.debug = true
    // 自定义菜单配置
    //editor1.customConfig.menus = [
    //    'image',  // 插入图片
    //];
    editor1.create();
}
//监控富文本框的图片变化

```csharp
let nowimgs = [];//存储富文本框没改变之前的所有图片
let oldimgs = [];//存储富文本框修改之后的所有图片
function onchange(html) {
    oldimgs = nowimgs;
    nowimgs = this.getSrc(html);
    if (oldimgs.length > 0) {
        for (var i = 0; i < oldimgs.length; i++) {
            var flag = 1;
            for (var j = 0; j < nowimgs.length; j++) {
                if (oldimgs[i] == nowimgs[j]) {
                    flag = 0;
                }
            }
            if (flag == 1) {
                $.post("/Common/DeleteFileByName/", { 'name': oldimgs[i] }, function (result, status) {
                });
            }
        }
    }
}
/**
 * 取出富文本编辑框内容中所有img的src
 */
function getSrc(html) {
    var imgReg = /<img.*?(?:>|\/>)/gi
    // 匹配src属性
    var srcReg = /src=[\\"]?([^\\"]*)[\\"]?/i
    var arr = html.match(imgReg)
    let imgs = []
    if (arr) {
        for (let i = 0; i < arr.length; i++) {
            var src = arr[i].match(srcReg)[1]
            imgs.push(src)
        }
    }
    return imgs
}

后台controller

		//富文本上传图片路径
    	private readonly string webEditPic = ConfigurationManager.AppSettings["WebUploadPic"].ToString();
        // GET: Common
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult UploadPic()
        {
            HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
            var file = files[0];
            //string target = Server.MapPath("/");//取得目标文件夹的路径
            //重命名上传的文件格式为：文件名+"_"+Guid+"."+文件格式
            string filename = file.FileName.Replace(".", "_" + Guid.NewGuid().ToString() + ".");//取得文件名字
            string path = Server.MapPath(webEditPic + filename);//获取存储的目标地址
            file.SaveAs(path);

            List<string> lt = new List<string>();
            string imgUrl = webEditPic.Replace("\\", "/") + filename;
            lt.Add(imgUrl.Remove(0, 1));
            return Json(new UploadInfo(0, lt));
        }
        //根据文件名删除文件
        [HttpPost]
        public ActionResult DeleteFileByName(string name)
        {
            string filename = name.Substring(14);
            string pathForSaving = Server.MapPath(webEditPic);
            System.IO.File.Delete(Path.Combine(pathForSaving, filename));
            return Json(new
            {
                msg = true
            });
        }
    }
    
    public class UploadInfo
    {

        public UploadInfo(int errno, List<string> data)
        {
            this.errno = errno;
            this.data = data;
        }
        public int errno { get; set; }

        public List<string> data { get; set; }
    }

web.config配置：WebUploadPic 是上传的文件夹

  <appSettings>
    <add key="WebUploadPic" value="~\WebUploadPic\"/>
  </appSettings>