黄兵的个人博客

summernote 多图上传

最近网站有多图需要上传，以前是一张一张的传，麻烦而且还会重复上传。

今天改造了一下summernote编辑器，支持多图上传。

前端代码如下：

$(document).ready(function () {
    $('.summernote').summernote({
        lang: 'zh-CN',
        minHeight: 400,
        tabsize: 2,
        disableDragAndDrop: false,
        dialogsInBody: true,
        dialogsFade: true,
        // ace options
        ace: {
            aceTheme: 'ace/theme/dawn',
            aceMode: 'c_cpp',
            aceLineHeight: '32px',
            aceFontSize: '16px',
            aceModeSelectorLabel: 'select your language',
            aceCodeInputAreaLabel: 'input your code',
            aceCodeSubmitBtnLabel: 'Insert',
            aceModalTitle: 'Insert Code',
            aceModes: [
                'c/c++', 'java', 'javascript', 'perl', 'python', 'php', 'ruby',
                'sh', 'golang', 'julia', 'rust', 'scala', 'haskell', 'lisp', 'lua', 'sql',
                'coffee', 'typescript'
            ],
        },
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']],
            ['highlight', ['highlight']],
            ['myplugin', ['aceCodeEditor']]
        ],
        
        callbacks: {
            onImageUpload: function (files, editor, welEditable) {
                for (var i = 0; i < files.length; i++) {
                    sendFile(files[i], editor, welEditable);
                }            
            }
        }
    });
    //Summernote default fontsize.
    $('.note-editable').css('font-size', '18px');
});


//文件上传
function sendFile(file, editor, welEditable) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        processData: false,
        contentType: false,
        cache: false,
        url: '/Manage/UploadImages',
        success: function (url) {
            $('.summernote').summernote('insertImage', url);         
        }
    });
};

可以藉由 FileList 的 length 屬性得知使用者選取的檔案數量：

var numFiles = files.length;

使用陣列獲取 File 物件：

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  ..
}

后台接收上传的图片代码如下：

[HttpPost]
public ActionResult UpLoadImages(HttpPostedFileBase file)
{
    if (file != null)
    {
        for (int i = 0; i < Request.Files.Count; i++)
        {
            var files = Request.Files[i];
            var fileName = Path.GetFileName(file.FileName);
            string fileType = Path.GetExtension(file.FileName);
            //获取上传文件的后缀   
            if (fileName != "")
            {
                string newName = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() +
                    DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() +
                    DateTime.Now.Second.ToString() + DateTime.Now.Millisecond.ToString() + fileType;
                //更改上传文件名   
                string Currentpath = Server.MapPath("/Images/UpLoadImages");
                CreateDirectory ImgDr=new CreateDirectory();
                ImgDr.CreatePath(Currentpath);
                var path = Currentpath + "\\" + newName;
                files.SaveAs(path);

                string RelativePath = "Images/UpLoadImages" + "/" + newName;

                GetUrl url = new GetUrl();

                string retPath = url.GetUrlStr().ToString() + RelativePath;

                return Content(retPath);
            }
        }
    }
    return View();
}

这里没有使用压缩和判断图片格式，因为是自己博客，自己一个人用，这也不是什么大问题。

有什么问题可以给我在下面留言。

参考资料：在網頁應用程式中使用本地檔案

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - summernote 多图上传