summernote上传图片保存路径(C#)
1.写一个div,ID为Content
1 <div id="Content" class="summernoteContent"> 2 3 </div>
2.让其成为富文本框,并且传递到后台
1 $("#Content").summernote({ 2 height: 200, 3 lang: 'zh-CN', 4 minHeight: null, 5 maxHeight: null, 6 airPopover: [['color', ['color']], ['font', ['bold', 'underline', 'clear']], ['para', ['ul', 'paragraph']], ['table', ['table']], ['insert', ['link', 'picture']]], 7 onChange: function (e) { 8 $("input[id=Content]").val($('.summernoteContent').code()); 9 }, 10 onChange: function (e) { 11 $("input[id=news_content]").val($('.summernoteContent').code()); 12 }, 13 onblur: function (e) { 14 $("input[id=news_content]").val($('.summernoteContent').code()); 15 }, 16 onImageUpload: function (files, editor, $editable) { 17 sendFile(files[0]); 18 }, 19 }); 20 function sendFile(file) { 21 data = new FormData(); 22 data.append("file", file); 23 $.ajax({ 24 data: data, 25 type: "POST", 26 url: "/News/Upload", //图片上传出来的url,返回的是图片上传后的路径,http格式 27 contentType: false, 28 cache: false, 29 processData: false, 30 success: function (data) { 31 //data是返回的hash,key之类的值,key是定义的文件名 32 alert(data); 33 //把图片放到编辑框中。editor.insertImage 是参数,写死。后面的http是网上的图片资源路径。 34 //网上很多就是这一步出错。 35 $('#Content').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg"); 36 37 }, 38 error: function () { 39 $(".note-alarm").html("上传失败"); 40 setTimeout(function () { $(".note-alarm").remove(); }, 3000); 41 } 42 }); 43 }
3.后台接收数据并保存
1 public ActionResult Upload() 2 { 3 HttpPostedFileBase Filedata = Request.Files["file"]; 4 // 如果没有上传文件 5 if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0) 6 { 7 return this.HttpNotFound(); 8 } 9 // 保存到 ~/img 文件夹中,名称不变 10 //string filename = System.IO.Path.GetFileName(Filedata.FileName); 11 string filename = GetImageName() + System.IO.Path.GetExtension(Filedata.FileName); 12 string virtualPath = string.Format("~/Image/NewsImg/{0}", filename); 13 // 文件系统不能使用虚拟路径 14 string path = this.Server.MapPath(virtualPath); 15 Filedata.SaveAs(path); 16 return Json("/Image/NewsImg/" + filename); 17 }
参考博客: http://blog.csdn.net/shenyingkui/article/details/45692167