• 转:tinyMCE中图片的自定义上传


    tinyMCE图片拖动到编辑框或者使用图片上传插件插入到编辑框时,需要指定上传方法,现需要使用后台接收前台上传的图片并将图片保存到服务器,之后将图片的url返回到前台做图片链接。
    
    tinyMCE中有两种方式:
    
    1、直接使用images_upload_url属性,该属性会在上传图片时自动访问指定的url并获取返回地址:
    
    images_upload_url: '/image/upload',
    
    后台需要返回{ "location": "" },指向图片url
    
    2、使用images_upload_handler及file_picker_callback,前者用于拖动图片到编辑框中,后者用于文件选择器选择图片上传
    
    images_upload_handler: function(blobInfo, success, failure) {
                var form = new FormData();
                form.append('files', blobInfo.blob(), blobInfo.filename());
                $.ajax({
                        url: "/image/upload",
                        type: "post",
                        data: form,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            success(data.location);
                        },
                        error: function(e) {
                            alert("图片上传失败");
                        }
                    });
             },
    
    file_picker_callback: function(callback, value, meta) {
    
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.onchange = function() {
                    var file = this.files[0];
                    var form = new FormData();
                    form.append("files", file); 
                    $.ajax({
                        url: "/image/upload",
                        type: "post",
                        data: form,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            callback(data.location);
                        },
                        error: function(e) {
                            alert("图片上传失败");
                        }
                    });
                };
    
                input.click();
    
            }
    
     form.append('files', blobInfo.blob(), blobInfo.filename());及form.append("files", file); 对应的注释为:
    
    formData.append(name, value);
    formData.append(name, value, filename);
    若不需要filename,可以只传前面两个。 
    ————————————————
    版权声明:本文为CSDN博主「ouxiaoyang5」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/ouxiaoyang5/article/details/81295579
  • 相关阅读:
    curl命令详解
    Linux 下 set env export declare浅浅 set和shopt命令详解--(shell定制) (转载)
    ps aux指令詳解
    smb设置参考手册 --详细参数
    Ajax
    JSON浅谈
    Date类型
    笔记本电脑不能上网的问题
    editplus 初步设置
    w10 系统升级
  • 原文地址:https://www.cnblogs.com/huahaiwujiang/p/12095184.html
Copyright © 2020-2023  润新知