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

LucasTwilight 发布于2019-07-01 10:45 / 2866人阅读

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

近来学习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());
            }
        }
    }

改善后的效果图：

GPU云服务器云服务器 js显示并删除json数据图片上传服务器并预览 ajax上传图片图片一直显示图片上传中

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

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

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

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

levy9527 2019-06-27 14:44 评论0 收藏0
php图片处理之本地图片转base64格式上传

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

isaced 2019-08-20 11:56 评论0 收藏0
thinkphp ajaxfileupload 异步上传图片

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

learn_shifeng 2019-06-28 13:35 评论0 收藏0
thinkphp ajaxfileupload 异步上传图片

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

SKYZACK 2019-08-20 18:58 评论0 收藏0