UEditor编辑器通过实现图片上传

本文档详细介绍了如何在UEditor编辑器中设置图片上传功能。首先,需在index.html引入UEditor的js文件,然后在body部分插入相应JS代码。接着,对UEditor自带的imageUp.php进行配置,主要修改图片保存路径配置(imgSavePathConfig)。完成上述四步调整后,UEditor的图片上传功能即可正常工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.新建一个index.html,引入一下2个编辑器js文件:

 JavaScript Code 
1
2
3
4
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>

接着,在body里写入以下js:

 JavaScript Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/plain" id="myEditor">
      请输入你的内容
    </script>
    <script type="text/javascript">
        UE.getEditor('myEditor',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
           
            //focus时自动清空初始化时的内容
            autoClearinitialContent:true,
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            //initialFrameWidth:700,
            //默认的编辑区域高度
            initialFrameHeight:300,
            imageUrl:"http://localhost/framework/plugin/ueditor/imageUp.php",
            imagePath:""
            //更多其他参数,请参考ueditor.config.js中的配置项
        })
    </script>

接着打开一个UEditor找到imageUp.php,修改 $imgSavePathConfig,

 JavaScript Code 
    $title = htmlspecialchars($_POST['pictitle'], ENT_QUOTES);
    $path = htmlspecialchars($_POST['dir'], ENT_QUOTES);
    // $globalConfig = include( "config.php" );
    // $imgSavePathConfig = $globalConfig[ 'imageSavePath' ];
    
    /**
     * 文件上传保存目录
     */
    
    $saveDir="upload/".date("Y/m/d");
    is_dr:#008000;">// $globalConfig = include( "config.php" );
    // $imgSavePathConfig = $globalConfig[ 'imageSavePath' ];
    
    /**
     * 文件上传保存目录
     */
    
    $saveDir="upload/".date("Y/m/d");
    is_dr:#008000;">// $globalConfig = include( "config.php" );
    // $imgSavePathConfig = $globalConfig[ 'imageSavePath' ];
    
    /**
     * 文件上传保存目录
     */
    
    $saveDir="upload/".date("Y/m/d");
    is_dir($saveDir) || mkdir($saveDir,0755,true);
    $imgSavePathConfig=array($saveDir);


    //获取存储目录
    if ( isset( $_GET[ 'fetch' ] ) ) {

        header( 'Content-Type: text/javascript' );
        echo 'updateSavePath('. json_encode($imgSavePathConfig) .');';
        return;

    }

    //上传配置
    $config = array(
        "savePath" => $imgSavePathConfig,
        "maxSize" => 1000//单位KB
        "allowFiles" => array(".gif"".png"".jpg"".jpeg"".bmp"),
       if ( !in_array( $path, $config[ 'savePath' ] ) ) %7nbsp; );

    if ( empty( $path ) ) {

        $path = $config[ 'savePath' ][ 0 ];

    }

    //上传目录验证
    if ( !in_array( $path, $config[ 'savePath' ] ) ) {
        //非法上传目录
        echo '{"state":"\u975e\u6cd5\u4e0a\u4f20\u76ee\u5f55"}';
        return;
    }

    $config[ 'savePath' ] = $path . '/';

    //生成上传实例对象并完成上传
    $up = new Uploader("upfile", $config);

    /**
     * 得到上传文件所对应的各个参数,数组结构
     * array(
     *     "originalName" => "",   //原始文件名
     *     "name" => "",           //新文件名
     *     "url" => "",            //返回的地址
     *     "size" => "",           //文件大小
     *     "type" => "" ,          //文件类型
     *     "state" => ""           //上传状态,上传成功时必须返回"SUCCESS"
     * )
     */
    $info = $up->getFileInfo();

    /**
     * 向浏览器返回数据json数据
     * {
     *   'url'      :'a.jpg',   //保存后的文件路径
     *   'title'    :'hello',   //文件描述,对图片来说在前端会添加到title属性上
     *   'original' :'b.jpg',   //原始文件名
     *   'state'    :'SUCCESS'  //上传状态,成功时返回SUCCESS,其他任何值将原样返回至图片上传框中
     * }
     */
    echo "{'url':'" . 'http://localhost/framework/plugin/ueditor/'.$info["url"] . "','title':'" . $title . "','original':'" . $info["originalName"] . "','state':'" . $info["state"] . "'}";



最后完成,只需要需改4处地方



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值