摘要:近来学习的过程中,项目中有个发帖功能,选择主题图片。如下利用原始的文件上传处理,虽然通过原始语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用技术,实现选择性删除所选图片功能,并不会有兼容问题。
近来学习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
摘要:文章首发于蓝锅锅博客主要是用到的接口,既然是的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离,珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客,欢迎交流,共同进步。 我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...
摘要:文章首发于蓝锅锅博客主要是用到的接口,既然是的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离,珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客,欢迎交流,共同进步。 我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...
摘要:开发图片上传,图片异步上传是目前比较方便的功能这里我就不写文件了,将代码写出来。 thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来。引入核心文件下载https://github.com/carlcarl/A...HTML下面首先在html页面引入相关js资源 图片上传 接下来在body中创建相关div 封...
摘要:开发图片上传,图片异步上传是目前比较方便的功能这里我就不写文件了,将代码写出来。 thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来。引入核心文件下载https://github.com/carlcarl/A...HTML下面首先在html页面引入相关js资源 图片上传 接下来在body中创建相关div 封...
阅读 4047·2021-10-08 10:04
阅读 3018·2021-08-11 11:20
阅读 2688·2021-07-25 21:37
阅读 2652·2019-08-30 12:44
阅读 2276·2019-08-30 11:12
阅读 1280·2019-08-26 13:45
阅读 2299·2019-08-26 11:53
阅读 3025·2019-08-26 11:32