tp5 （图片）多图上传并生成可访问的链接

声明常量，用来装网址名字，这样我们就不用每次去手动输入了，我在入口文件中声明的。

defined('__UPLOADURL__')   or define('__UPLOADURL__',  'http://tp5-expert.likeball.top');

html代码

<form action = "{:url('admin/Indexhome/carousel')}" method = 'post' enctype = 'multipart/form-data'>
<input type = 'file' name = 'file[]' multiple = 'multiple' id = '' value = '' />
<input type = 'text' name = 'former' value = '这里需要后台传过来值' />
<input class = 'layui-btn' type = 'submit' value = '提交' />
</form>

控制器（注意前端input框的name值要加[]数组的格式）

<?php
namespace app\admin\controller;
header( 'Content-Type:text/html;charset=utf-8' );
use think\Controller;
use think\Request;
use think\Loader;
class Indexhome extends Controller {//轮播public function carousel() {if ( $_FILES['file']['name'] == '' ) {//如果报错那么使用['goods_carousel']['name'][0]这个来判断是否为空//如果没有上传文件那么上传默认的图片$arr = input( 'former' );//接收默认图片} else {$file = request()->file( 'file' );foreach ( $file as $item ) {//移动到框架应用根目录/uploads/目录下$info = $item->move( ROOT_PATH . 'public' . DS . 'static/uploads' );if ( $info ) {$saveName = str_replace( '\\', '/', $info->getSaveName() );$img = '/static/uploads/' . $saveName;} else {echo '文件上传失败' . '<br/>';}$data[] = explode( ',', $img );}$arr = '';foreach ( $data as $k => $v ) {$arr .= __UPLOADURL__.$v[0].',';//$ggtop[$k]['photo'] = __UPLOADURL__.$v['photo'];}//dump( $arr );// exit;$fin['picture'] = $arr;$fin['time'] = date( 'Y-m-d h:i:s', time() );$end = db( 'carousel' )->where( 'id', 1 )->update( $fin );if ( $end ) {$this->success( '增加成功' );} else {$this->error( '增加失败' );}}}
}

控制器处理刚插入的图片路径，方便前端用ajax请求；

代码：

    public function picture(){$carousel = db('carousel')->where('id', 1)->find();// 消除字段最右边的符号$picture = rtrim($carousel['picture'],",");//将字符串转为数字已逗号","分割$explode = explode("," , $picture);//返回json数据类型，方便前端使用return json($explode);}

用mui请求刚才上传的图片，生成轮播图

前端ajax页面请求读取，我用的是mui的框架所以，下载一个引入一下就可以了，地址 https://github.com/dcloudio/mui

文档说的不是很好，放在根目录，我的是放在根目录如果不是自己在前面拼文件夹名字

 <link rel="stylesheet" href="mui-master/dist/css/mui.min.css" /><script src="mui-master/dist/js/mui.min.js" type="text/javascript" charset="utf-8"></script>

js放在下面不知道的同学注意了（这个js放在最上面和css放在一起）。

<!--轮播开始--><div class="lunbo"><div class="mui-slider"><div class="mui-slider-group mui-slider-loop"></div><div class="mui-slider-indicator"></div></div></div><!--轮播结束--><script type="text/javascript">$(function() {$.ajax({type: 'POST',url: "http://tp5-expert.likeball.top/api/Indexhome/picture",dataType: 'json',success: function(data) {console.log(data);$('.mui-slider-group').empty();$('.mui-slider-indicator').empty();var length = data.length;if(length == 1) {console.log(data[0]);$('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data[0] + '" /></div>');} else {$('.mui-slider-group').append('<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data[length - 1] + '" /></div>');$('.mui-slider-indicator').append('<div class="mui-indicator mui-active"></div>');for(var i = 0; i < length; i++) {$('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data[i] + '" /></div>');}$('.mui-slider-group').append('<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data[0] + '" /></div>');for(var i = 0; i < length - 1; i++) {$('.mui-slider-indicator').append('<div class="mui-indicator"></div>');}}var gallery = mui('.mui-slider');gallery.slider({interval: 1000 //自动轮播周期，若为0则不自动播放，默认为0；});},error: function(error) {console.log('error');}});})
</script>

tp5 （图片）多图上传并生成可访问的链接相关推荐

php多图片上传封装类,php----图片上传封装类：单张，多张图片上传，生成缩略图...
<?php /** * 功能: 单张,多张图片上传,生成缩略图 * Class ImgUpload */ class ImgUpload { private $file; //文件信息 priv ...
php 文件预览水印,PHP图片上传，预览图上传，水印设置
//设置图片的存放目录设置水印的存放地址如果愿意,可以给预览图.上传图片分设不同的存储地址 $img_path = $_SERVER['DOCUMENT_ROOT']."/data/img ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
续《用最简单的例子实现jQuery图片即时上传》之多图上传实现
本用例主要含两个文件(index.html.submit_form_process.php),一个文件夹(files/).特别的,files中含一个报错图片error.jpg,jquery库引用了外链 ...
九宫格拼图android代码,Android 多图上传后将图片进行九宫格展示的实例代码
不多说上代码 public abstract class NineGridAdapter { protected Context context; protected List list; publi ...
通过UEditor多图上传到七牛云出现图片不全，或上传失败bug
在node-ueditor进行拓展,通过多图上传直接将图片保存到七牛云.在保存的时候通过busboy包进行文件流保存 bug: 发现多张图片上传时候,部分图片出现上传失败,或显示出得图片只有一半的情况 ...
java实现后台直接生成二维码图片并直接上传到七牛云上面
java实现后台直接生成二维码图片并直接上传到七牛云上面需求:后台是直接根据唯一核销码生成图片,然后的话直接上传到七牛云,数据库只是保存地址,一开始也想错了,想成了创建临时文件存储生成的图片再上传到 ...
antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等
组件涉及到 vue3.2.vite.Ant Design Vue 3.2.16.Windi CSS样式库.vuedraggable-es拖拽库等组件功能图片拖拽多图上传自定义图片加载样式自定 ...

tp5 （图片）多图上传并生成可访问的链接

html代码

控制器（注意前端input框的name值要加[]数组的格式）

tp5 （图片）多图上传并生成可访问的链接相关推荐

最新文章

热门文章