资讯专栏INFORMATION COLUMN

thinkPHP利用ajax异步上传图片并显示、删除

LucasTwilight / 2853人阅读

摘要:近来学习的过程中,项目中有个发帖功能,选择主题图片。如下利用原始的文件上传处理,虽然通过原始语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用技术,实现选择性删除所选图片功能,并不会有兼容问题。

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片。如下:

利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。


表单文件form:

主题图片: 图片上传

需要发送Ajax请求的话,当然表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片。
当我们点击上传图片这个button按钮时触发选择图片实现Ajax上传

JavaScript代码:


点击选择图片之后就是交给服务器端处理了。
php接口文件:

    public function upimg()
    {
        //验证
        $file = request()->file("img");
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->move(ROOT_PATH . "public" . DS . "uploads");
            if($info){
                // 成功上传后 获取上传信息
                $img_src = "/uploads/".$info->getSaveName();
                echo $img_src; //返回ajax请求
            }else{
                // 上传失败获取错误信息
                $this->error($file->getError());
            }
        }
    }

改善后的效果图:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/29429.html

相关文章

  • php图片处理之本地图片转base64格式上传

    摘要:文章首发于蓝锅锅博客主要是用到的接口,既然是的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离,珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客,欢迎交流,共同进步。 我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...

    levy9527 评论0 收藏0
  • php图片处理之本地图片转base64格式上传

    摘要:文章首发于蓝锅锅博客主要是用到的接口,既然是的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离,珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客,欢迎交流,共同进步。 我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...

    isaced 评论0 收藏0
  • thinkphp ajaxfileupload 异步上传图片

    摘要:开发图片上传,图片异步上传是目前比较方便的功能这里我就不写文件了,将代码写出来。 thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来。引入核心文件下载https://github.com/carlcarl/A...HTML下面首先在html页面引入相关js资源 图片上传 接下来在body中创建相关div 封...

    learn_shifeng 评论0 收藏0
  • thinkphp ajaxfileupload 异步上传图片

    摘要:开发图片上传,图片异步上传是目前比较方便的功能这里我就不写文件了,将代码写出来。 thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来。引入核心文件下载https://github.com/carlcarl/A...HTML下面首先在html页面引入相关js资源 图片上传 接下来在body中创建相关div 封...

    SKYZACK 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<