开发者社区> 源码下载> 正文

bootstrap-wysiwyg中JS控件富文本中的图片由本地上传到服务器(阿里云、七牛、自己的数据库)

简介: 一、我假设你是要保存到自己的数据库中(因为上传到阿里云、七牛更简单原理一样的) 点击插入图片如下图: 1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则是存不下的这样子前台获取的时候就取不到)原因是你保存的时候,它把图片给转换为了data:image/gif;base64,这样子话所以一般不建议直接用,因为你可能存几张后就会出错了。
+关注继续查看

一、我假设你是要保存到自己的数据库中(因为上传到阿里云、七牛更简单原理一样的)

点击插入图片如下图:



1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则是存不下的这样子前台获取的时候就取不到)原因是你保存的时候,它把图片给转换为了data:image/gif;base64,这样子话所以一般不建议直接用,因为你可能存几张后就会出错了。

2、先把图片上传到服务器(你自己的)然后再修改图片的Url,找了好多网上的资料,感觉写的都比较复杂,嗯这里自己就试着写了一个比较简单的是利用Ajax传到后台插入,然后这个控件自己会修改它的路径,只需要如下步骤:

a、打开你自己调用的bootstrap-wysiwyg.js这个文件,我们来修改一下readFileIntoDataUrl这个方法,应该就是这个文件的第一个方法啦,把它的先注释了,修改为这样子

    var readFileIntoDataUrl = function (fileInfo) {
        var form = new FormData();
        form.append("editorImage", fileInfo);
        var xhr = new XMLHttpRequest();
        xhr.open("post", "/Admin/Ajax/ajaxUploadFile", false);//这里是你传到后台的入库的方法,这个方法返回图片路径就可以了
        xhr.send(form);
        return xhr.responseText;
    };

b、ajaxUploadFile这个方法要做的事情就是把获取到的$_FILES中的图片入库代码如下:

/*后台bootstrap-wysiwyg.js上传图片*/
    public function ajaxUploadFile(){
        header("content-type:text/html;charset=utf-8");
        //echo 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1508372197,632975480&fm=80';exit;
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     'Public/Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传(子)目录
        $upload->saveRule = uniqid;
        // 上传文件
        $info   =   $upload->upload($_FILES);//上传图片的方法
        $imagesModel=M('maiclub_images');
        $data['image_url']=$info['editorImage']['savepath'].$info['editorImage']['savename'];
        $data['create_time']=time();
        $data['id']=null;
        if($imagesModel->add($data)) {
            echo __APP__.'/Public/Uploads/'.$data['image_url'];exit;
        }else{
            echo '入库失败了,联系管理员';exit;

        }


    }


3、亲测是成功的,祝你幸运,也可以成功哦。交流群:368848856嘿嘿

PHP+Mysql网站源码学习请访问PHP+Mysql网站源码学习请访问

http://www.erdangjiade.com/


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
原生 js 实现截图粘贴预览图片功能
原生 js 实现截图粘贴预览图片功能
15 0
前端知识学习案例2-开发企业网站2-准备js库 图片等
前端知识学习案例2-开发企业网站2-准备js库 图片等
12 0
js基础笔记学习267练习1自动切换图片
js基础笔记学习267练习1自动切换图片
11 0
js 将图片转化成黑白
js 将图片转化成黑白
15 0
利用JavaScript的控制图片的CSS位置实现轮播图功能
利用JavaScript的控制图片的CSS位置实现轮播图功能 上篇博客我们说到了如何给轮播图添加定时器效果,当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的,有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图: 在这里插入图片描述 HTML代码: <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner"></li> <li class="banner"></li>
43 0
JS实现关闭图片窗口
通过事件的绑定来实现,关闭二维码的效果。
29 0
AngularJs异步上传图片,并获取图片地址(JS service层)
anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器会把Content-Type 设置为 multipart/form-data.
18 0
JS批量下载网页中的图片!
JS批量下载网页中的图片!
189 0
+关注
源码下载
本人二当家的,性温和,擅代码,好技术,人谓代码狗,程序猿;河南商丘人氏也,现居上海,曾先后创办,上海什尔网络科技,上海红苹果电脑科技有限公司,上海素商网络科技等;自毕业即誓言:定要搞网络,携思科、华为等路由、交换机以定天下;初涉江湖,身不由己,期间,曾开过水果店,熟食店,亦开过淘
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的对象
立即下载
JS零基础入门教程(上册)
立即下载