TP5.1+Layui实现文件(图片为例)异步上传以及上传图预览

本文链接：https://blog.csdn.net/qq_38280150/article/details/98728977

该教程详细介绍了如何在ThinkPHP 5.1（TP5.1）中结合Layui实现文件异步上传及预览功能。通过Layui的上传组件，配合控制器进行文件验证和存储，实现在上传图片后展示预览图，并将图片路径信息与其他表单数据一同提交至服务器。示例包括HTML模板、Layui上传配置和控制器代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文讲解将以实际开发项目中后台添加用户模块中使用到的Layui异步文件上传以及上传图预览功能为例

如果不想Listen Talk只想Show Me Code的话直接拉到文章最后

我将贴上添加用户模块完整的模版文件和控制器相应方法代码

首先贴张图看一下实际效果：
在这里插入图片描述

此模块使用的是Layui的样式，接触过Layui的应该知道Layui自带的文件上传功能无法随表单其他元素一起提交给服务器，所以这里需要用到异步上传，基本思路是使用Layui的文件上传控件然后再添加一个value为空的img标签用于显示预览图和一个隐藏域用于提交文件路径信息，文件上传使用Layui.upload上传接口，其中的url字段填我们控制器中自己写的接口即可，在控制器中我们对图片格式、大小等进行验证后传入具体目录后获取路径并返回，Layui在获取到路径信息回调后即可将img的src赋值以显示预览图，并且将隐藏域value赋值从而实现路径信息和表单其他元素一起提交至服务器，说了这么多，下面贴出这些模块的代码片以供参考：
①图片上传+预览图+隐藏域

<div class="layui-form-item">
	<label class="layui-form-label" for="icon">头像</label>
	<div class="layui-input-inline">
		<div class="site-demo-upbar layui-input-inline">
			<input type="file" name="iconupload" lay-type="images" class="layui-upload-file" accept="image/*" id="iconupload">
		</div>
	</div>
</div>

<div class="layui-form-item">
     <label  class="layui-form-label">头像预览</label>
     <div class="layui-input-inline"><img style="width:150px;" id="icon_preview" src=""></div>
 </div>

<input type="hidden" name="icon" id="icon" value="">

②Layui.upload接口以及回调

layui.upload({
   
   
   url: '{:url(\'index/user/iconupload\')}' //上传接口
    ,success: function(res){
   
   
        if(res.status==100)
        layer.alert(res.message, {
   
   icon: 6},function (thiswindow) {
   
   
            $('#icon_preview').attr('src',res.url);
            $('#icon').val(res.url);
            layer.close(thiswindow);
        });
        else
            layer.alert(res.message, {
   
   icon: 5},function (thiswindow) {
   
   
                $('#icon_preview').attr('src',res.url);
                $('#icon').val(res.url);
                layer.close(thiswindow);
            });
    }
});

③控制器iconupload方法

public function iconupload()
    {
   
   
        $icon = Request::file('iconupload');
        $info = $icon->validate([
             'size'=>10240000,
             'ext'=>'bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp'
         ])->move('uploads/usericon/');
         if($info)
         {
   
   
             $url = "\\uploads\\usericon\\".$info->getSaveName();
             return json(['status'=>100,'message'=>'上传成功','url'=>$url]);
         }
         else
         {
   
   
             return json(['status'=>-200,'message'=>$icon->getError(),'url'=>'']);
         }
    }

在完成以上操作后即实现了异步上传+预览图，并可以将上传图片路径信息同表单其他元素一起提交至服务器

此例为图片上传，如果想要上传其他文件，你需要自己限定上传文件的后缀以及上传按钮上的文字

文件后缀需要修改input标签中的lay-ext：

<div class="layui-form-item">
    <label class="layui-form-label" for="appupload"><span class="x-red">*</span>上传安装包</label>
    <div class="layui-input-inline">
        <div class="site-demo-upbar layui-input-inline">
            <input type="file" lay-type="file" name="appupload" lay-ext="apk" class="layui-upload-file" accept=".apk" id="appupload">
        </div>
    </div>
    <div class="layui-form-mid layui-word-aux">
        <span class="x-red" id="tip"