ThinkPHP单图片上传及预览

最新推荐文章于 2021-03-09 21:14:51 发布

i0vv0i

最新推荐文章于 2021-03-09 21:14:51 发布

阅读量452

点赞数

分类专栏： ThinpPHP 文章标签： thinkphp 单图片上传上传及预览单图片上传及预览 thinkphp上传及预览图片

本文链接：https://blog.csdn.net/qq_37780279/article/details/75115564

版权

ThinpPHP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

功能:	Thinkphp单图片上传及预览
开发环境:	jquery+thinkPHP3.2.3
开发人:	刘武星

控制器

public function Form(){
    if(!session('login')){   $this ->display("login"); return;  }	//检查登录状态,如过不需要请删除
    if(IS_GET){     $this ->display();  }
    if(IS_POST){                            //保存图片
        $value = $this->addimg();           //调用函数
        //if($value != "0"){  unlink($_SERVER['DOCUMENT_ROOT'].I('del_img'));   }     //删除上一张图片
        $this->assign('value',$value);      //返回
        $this->display();
    }
}
public function addimg(){  $url ='/ueditor/php/upload/image/';     //图片添加的路径
    $upload = new \Think\Upload();                                   // 实例化上传类
    $upload->maxSize   =  3145728 ;                                  // 设置附件上传大小
    $upload->exts      =  array('jpg', 'gif', 'png', 'jpeg');       // 设置附件上传类型
    $upload->rootPath  =  '.'.$url;                                  // 设置附件上传根目录
    $info   =   $upload->uploadOne($_FILES['file']);                 // 上传单个文件
    if(!$info) {        return "错误信息";       }                 // 上传错误提示错误信息
    else{  return $url.$info['savepath'].$info['savename']; }      // 上传成功 获取上传文件信息
}

需要在当前的页面引入内框架

<iframe src="__URL__/form.html" id="iframe" style="display: none;"></iframe>

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<form id="form" action="__URL__/Form" enctype="multipart/form-data" method="post">
    <input id="file" type="file" name="file">
    <input class="url_img" name="del_img" type="text" value="{$value}">
    <button></button>
</form>
</body>
</html>

jquery封装

(function () {
    $.fn.addimg = function (e) {             //描述: 单图片上传 [配合form文件及控制器方法];
        this.click(function () {                    $_img = this;                         //当前节点
            $('#iframe').contents().find('#file').click();                                 //触发绑定
            $('#iframe').contents().find('#file').on("charset",function () {});            //
            $('#iframe').contents().find("input[type='file']").change(function () {        //触发文件
                $('#iframe').contents().find("form").submit();                             //提交
                setTimeout(function () {                                                   //延时触发
                    var value = $('#iframe').contents().find("input[type='text']").val();  //读取iframe内url新路径
                    $($_img).attr("src",value);             $($_img).attr("typeof",value); //显示
                    if(typeof(e)!= 'undefined'){      e(value);       }                    //返回值
                },500);
            });
        });
    }
})(jQuery);

封装的jquery使用

第一种使用

$(function () {
    $(".img_alt img").addimg();
})

第二种使用  [可以把显示中的显示那行代码去掉,在下面返回的地方自己写入指定位置]

$(function () {
    $(".img_alt img").addimg(function (data) {
        alert(data);   //返回的是url地址
    });
})

注:我是以img本身来点击及预览,如果是按钮点击请使用

第二种jquery的使用方法.

i0vv0i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThinkPHP单图片上传及预览

功能:Thinkphp单图片上传及预览开发环境:jquery+thinkPHP3.2.3开发人:刘武星控制器public function Form(){ if(!session('login')){ $this ->display("login"); return; } if(IS_GE
复制链接

扫一扫