ThinkPHP5+Layui实现图片上传加预览功能

使用ThinkPHP5与Layui框架实现图片上传及预览功能详解

在Web开发中，图片上传和预览功能是非常常见的功能之一。本文将通过实例代码展示如何使用ThinkPHP5和Layui框架实现这一功能，对于需要实现此功能的开发者来说具有一定的参考和借鉴价值。

我们先来看HTML部分。在页面中，我们创建了两个主要的div元素：一个用于上传图片的按钮，另一个用于显示上传后的图片预览。

HTML代码：

```html

```

接下来是JavaScript部分。我们使用Layui的上传组件来实现图片上传和预览功能。当点击上传按钮时，会触发相关的上传操作，包括图片类型的校验、自动上传、上传前后的处理等操作。在上传之前，我们可以通过预览功能实时显示上传的图片。

JavaScript代码：

```javascript

var uploadInst = upload.render({

elem: 'cover', //上传按钮的id

url: 'addCourse', //服务器接收的URL地址

accept: 'file', //允许上传的文件类型

auto: true, //自动上传文件，不需要手动点击上传按钮

before: function (obj) { //在文件上传前触发此回调函数

console.log(obj); //打印文件对象信息

// 预览图片，将返回的图片链接地址设置为img标签的src属性，实现图片预览效果

obj.preview(function(index, file, result) {

$('preview').attr('src', result);

});

},

done: function(res) { //上传成功后的回调函数

console.log(res); //打印服务器返回的响应数据

},

error: function(index, upload) { //上传失败的回调函数

//处理上传失败的情况

}

});

```

最后是PHP部分。在服务器端，我们需要处理图片文件的接收、存储和返回图片路径等操作。这里使用的是ThinkPHP5框架来处理这些逻辑。当图片上传成功后，服务器会返回图片的存储路径，前端可以根据这个路径来显示上传的图片。

PHP代码（接口部分）：

```php

$file = request()->file('file'); //获取上传的文件对象

// 将文件移动到指定目录（移动到框架应用根目录/public/uploads/ 目录下）

$info = $file->move('public/upload/');

if ($info) {

$path = 'public/upload/'.$info->getSaveName(); //获取文件的保存路径（含文件名）

return return_su($path); //返回成功响应，包含文件路径信息

}

``` 使用ThinkPHP5和Layui框架实现图片上传和预览功能是一个相对简单的过程。通过合理的HTML结构、JavaScript逻辑和PHP后端处理，我们可以轻松地实现这一功能。希望本文能对需要的开发者有所帮助。如有任何疑问，欢迎留言交流。感谢大家对长沙网络推广的支持与关注！