J9国际集团|Home

135-2716-3909
网站建设资讯详细

前端开发◇之使用layui.js实现简单□□上传功能

发表日期:2026-07-05 11:46:36   作者来源:彬   浏览:6024   标签:前端开发    
在做项目中可能会遇到用户上传文件或者图片的问题,这里我使用layui.js,它主要使用起来非常的简单和方便,使用前需要去到layer官网去下载相关的js,下载地址layui官网.官网的示□□□例如果有◎跟你需求※差不多,可以直接•拿过来用,有些不同□□的可以修☆改参数来◈配合实现□□□你的需求,我来讲一□□讲我使用◥的过程和□□遇见的问□□题。
前端通过layui文件上传□□□控件 把上传的□□□□文件上传□□□□的后台,通过ThinkPHP框架的的□□□□上传方法□□□□实现上传□□文件,因为我前□□端的样式□□□已经写好□□□□了所以使□□用的是id绑定上传□□□控件。
<input class="r-file" type="file" name="file_url"  id="j_upload">
加载js和css
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="./layui/layui.js" charset="utf-8"></script>

代码1

Js调用 绑定上传控件的id ,默认的是post方式 提交到后台。

代码2

后台需要□□接收数据•的参数一❖定要是你□□□□控件的name命名,这里input的name是file_url所以后台□□□□接收是使★用$_FILES["file_url"],在tp里要使用$_FILES去获取文◉件信息,然后实例□□□□化框架的●上传类,这里把文□□□件保存到□□□缓存临时□□□文件夹里○面,返回上传□□□□的文件信□□□□息到前端,实现前端▽的文件回□□□显和一下□□□响应事件,我这里比□□□□较简单只□□□□完成了回□□□显,
<input type="hidden" class="rinput" id="file_urls" name="file_urls" value="">
<input type="hidden" class="rinput" id="file_name" name="file_name" value="">
<input type="hidden" class="rinput" id="file_id" name="file_id" value="0">
我使用了◢隐藏标签□□□去保存文□□件的信息,等待用户▲提交后,在提交方□□法里判断□□数据和实□□□现文件的□□□□转移我这◉里用php的rename()函数来转•移文件

代码3

如没特殊注明,文章均为J9国际集团原创,转载请注明来自https://www.nzweibaum.com/news/5731.html