编程技术

Document

summernote图片上传功能保存到服务器指定文件夹+php代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

//这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>


</head>
<body>
<form action="{:U(upload/upload)}"  method="post">
  <div id="summernote"><p>Hello Summernote</p></div>
   <input type="submit" value="提交">
</form>
</body>
</html>

js代码

<script type="text/javascript">
    //调用富文本编辑
    $(document).ready(function() {
        var $summernote = $('#summernote').summernote({
            height: 300,
            minHeight: null,
            maxHeight: null,
            focus: true,
            //调用图片上传
            callbacks: {
                onImageUpload: function (files) {
                    sendFile($summernote, files[0]);
                }
            }
        });

        //ajax上传图片
        function sendFile($summernote, file) {
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "{:U('Upload/upload_img')}",//路径是你控制器中上传图片的方法，下面controller里面我会写到
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (data) {
                    $summernote.summernote('insertImage', data, function ($image) {
                        $image.attr('src', data);
                    });
                }
            });
        }
    });
</script>

Controller控制器

public function upload_img()
    {
        if ($_FILES) {
            if (!$_FILES['file']['error']) {
                //生成的文件名（时间戳，精确到毫秒）
                list($usec, $sec) = explode(" ", microtime());
                $name = ((float)$usec + (float)$sec) * 1000;

                $ext = explode('.', $_FILES['file']['name']);
                $filename = $name . '.' . $ext[1];
                $folder = date("Ymd");
                $targetDir = C('UPLOAD_PICTURE_URL') . $folder;
                //如果上传的文件夹不存在，则创建之
                if ($targetDir) {
                    @mkdir($targetDir);
                }

                //文件目录
                $targetDir_url = $targetDir . '/article';
                //如果上传的文件夹不存在，则创建之
                if ($targetDir_url) {
                    @mkdir($targetDir_url);
                }

               //图片上传的具体路径就出来了
                $destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory
                $location = $_FILES["file"]["tmp_name"];

                //将图片移动到指定的文件夹****核心代码
                move_uploaded_file($location, $destination);
                echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL
            } else {
                echo $message = 'Ooops!  Your upload triggered the following error:  ' . $_FILES['file']['error'];
            }
        }
    }

3.提交图片，将数据插入到数据库中

　　上面js和controller配合将图片移动到指定的服务器文件夹中，然后ajax返回图片的完整路径以及保存的图片名，以<img src="Uploads/..../1.jpg">放入编辑文本中，点击提交保存到数据库中。