summernote异步图片上传

2024-02-16 07:18

本文主要是介绍summernote异步图片上传,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

用summernote编辑器的好处是因为可以自适应,手机也可以自适应,很方便,编辑器本身也有自带的图片上传,不过不方便,还是自己写一个异步上传的方法

具体如下:

前端页面代码:

        <tr class="">
                  <td>沟通内容:</td>
                  <td><textarea class="form-control" id="summernote" name="content"  cols="60" rows="10"></textarea> </td>
        </tr>

js代码:

<script type="text/javascript">
    $(function(){
        $('#summernote').summernote({
              height: 300, //定义初始高度
              lang: 'zh-CN', // default: 'en-US'
              focus:true,
              toolbar: [
                 ['style', ['bold', 'italic', 'underline', 'clear']],
                 ['fontsize', ['fontsize']],
                 ['color', ['color']],
                 ['para', ['ul', 'ol', 'paragraph']],
                 ['height', ['height']],
                 ['insert', ['picture', 'video']]
               ],
              callbacks: {  
                    onImageUpload: function(files, editor, $editable) {  
                        sendFile(files[0],editor,$editable);  
                    }  
              }
        
        });
        
        function sendFile(file, editor, $editable){
            var filename = false;
            try{
                filename = file['name'];
            } catch(e){
                filename = false;
            }
            if(!filename){$(".note-alarm").remove();}
            //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
            var ext = filename.substr(filename.lastIndexOf("."));
            ext = ext.toUpperCase();// 验证图片类型
            var timestamp = new Date().getTime();
            var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
            //name是文件名,自己随意定义,aid是我自己增加的属性用于区分文件用户
            data = new FormData();
            data.append("file", file);
            data.append("key",filename);
            data.append("token",$("#summernote").attr('token'));
            
            $.ajax({
                data: data,
                type: "POST",
                url: "${pageContext.request.contextPath}/admin/customerRecord_upload.do", //图片上传出来的url,返回的是图片上传后的路径,http格式
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {  
                    var path = data.data;
                    $('#summernote').summernote('insertImage', path, filename);
                    $("img").addClass("img-responsive center-block");
                },  
                error: function () {  
                    alert("上传失败!");  
                }  
            });
        }
    });
</script>

controller层的代码

@RequestMapping(value = "/customerRecord_upload", method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> uploadHandle(HttpServletRequest request,HttpServletResponse  response){
        Map<String,Object> map = new HashMap<String,Object>(0);
        map.clear();
        
        MultipartFile multipartFile = null;
        // 转型为MultipartHttpRequest:
        if(request instanceof MultipartHttpServletRequest){
            
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            // 获取对应file对象
            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
            Iterator<String> fileIterator = multipartRequest.getFileNames();
            while (fileIterator.hasNext()) {
                String fileKey = fileIterator.next();
                // 获取对应文件
                multipartFile = fileMap.get(fileKey);
                if (multipartFile.getSize() != 0L) {
                    // 日期目录
                    String imageDir = "admin/upload/customerRecord/" + DateUtil.dateToString(new Date(), "yyyyMMdd");
                    String realPath = request.getSession().getServletContext().getRealPath(imageDir);
                    File dir = new File(realPath);
                    if (!dir.exists()) {
                        dir.mkdirs();
                    }
                    // 获取上传文件原始名称
                    String fileName = multipartFile.getOriginalFilename();
                    // 获取文件的扩展名
                    String ext = fileName.substring(fileName.lastIndexOf("."));
                    String tmpExt = ext.toLowerCase(); // 验证图片类型
                    if (!tmpExt.contains(".jpg") && !tmpExt.contains(".gif") && !tmpExt.contains(".png") && !tmpExt.contains(".jpeg")) {
                        map.put("msg", "只能上传jpg、gif、png类型的图片。");
                        map.put("data", "");
                        return map;
                    }
                    // 重新给文件命名
                    String banName = String.valueOf(System.currentTimeMillis() + RandomUtil.getRandomNumber());
                    String newName = banName + ext;
                    // 封装为文件对象
                    File targetFile = new File(realPath, newName);
                    try {
                        // 上传文件
                        multipartFile.transferTo(targetFile);
                        //返回给前端页面的图片

String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"//"+imageDir+"//"+newName;
                        map.put("data", path);
                        map.put("msg", "上传成功");
                    }catch(Exception e){
                        map.put("data", "");
                        map.put("msg", "上传失败");
                    }
                }
            }
        }
        return map;    
    }

这样子就OK啦,图片就自动上传到编辑器里面了,而且还可以自适应,效果如下:

这个是浏览器看手机效果

这篇关于summernote异步图片上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/713871

相关文章

c/c++的opencv实现图片膨胀

《c/c++的opencv实现图片膨胀》图像膨胀是形态学操作,通过结构元素扩张亮区填充孔洞、连接断开部分、加粗物体,OpenCV的cv::dilate函数实现该操作,本文就来介绍一下opencv图片... 目录什么是图像膨胀?结构元素 (KerChina编程nel)OpenCV 中的 cv::dilate() 函

GitLab文件的上传与下载方式

《GitLab文件的上传与下载方式》:本文主要介绍GitLab文件的上传与下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录GitLab 项目拉取到本地GitLab 项目上传方法方法 1:本地项目未初始化Git方法 2:本地项目已初始化GitGitLab 上

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1

Java应用如何防止恶意文件上传

《Java应用如何防止恶意文件上传》恶意文件上传可能导致服务器被入侵,数据泄露甚至服务瘫痪,因此我们必须采取全面且有效的防范措施来保护Java应用的安全,下面我们就来看看具体的实现方法吧... 目录恶意文件上传的潜在风险常见的恶意文件上传手段防范恶意文件上传的关键策略严格验证文件类型检查文件内容控制文件存储

Java实现图片淡入淡出效果

《Java实现图片淡入淡出效果》在现代图形用户界面和游戏开发中,**图片淡入淡出(FadeIn/Out)**是一种常见且实用的视觉过渡效果,它可以用于启动画面、场景切换、轮播图、提示框弹出等场景,通过... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细

Java如何根据文件名前缀自动分组图片文件

《Java如何根据文件名前缀自动分组图片文件》一大堆文件(比如图片)堆在一个目录下,它们的命名规则遵循一定的格式,混在一起很难管理,所以本文小编就和大家介绍一下如何使用Java根据文件名前缀自动分组图... 目录需求背景分析思路实现代码输出结果知识扩展需求一大堆文件(比如图片)堆在一个目录下,它们的命名规

Java实现MinIO文件上传的加解密操作

《Java实现MinIO文件上传的加解密操作》在云存储场景中,数据安全是核心需求之一,MinIO作为高性能对象存储服务,支持通过客户端加密(CSE)在数据上传前完成加密,下面我们来看看如何通过Java... 目录一、背景与需求二、技术选型与原理1. 加密方案对比2. 核心算法选择三、完整代码实现1. 加密上

将图片导入Python的turtle库的详细过程

《将图片导入Python的turtle库的详细过程》在Python编程的世界里,turtle库以其简单易用、图形化交互的特点,深受初学者喜爱,随着项目的复杂度增加,仅仅依靠线条和颜色来绘制图形可能已经... 目录开篇引言正文剖析1. 理解基础:Turtle库的工作原理2. 图片格式与支持3. 实现步骤详解第

在React聊天应用中实现图片上传功能

《在React聊天应用中实现图片上传功能》在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于React的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起... 目录技术栈实现步骤1. 消息组件改造2. 图片预览组件3. 聊天输入组件改造功能特点使用说明注意事项