博主信息
邯郸易住宋至刚
博文
53
粉丝
3
评论
0
访问量
25315
积分:0
P豆:127.5

20200129-Layui文件上传-PHP线上培训九期班

2020年02月06日 22:40:38阅读数:391博客 / 邯郸易住宋至刚/ 遇到的问题及解决方法

Layui文件上传

一、前端代码

  1. <section class="Hui-article-box">
  2. <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
  3. <span class="c-gray en">&gt;</span>
  4. 图片管理
  5. <span class="c-gray en">&gt;</span>
  6. 图片列表
  7. <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
  8. </nav>
  9. <div class="Hui-log">
  10. @csrf
  11. <div class="cl pd-5 bg-1 bk-gray mt-20" style="margin: 80px 100px">
  12. <span class="l">
  13. <button **id="up"** class="btn btn-primary radius" ><i class="Hui-iconfont">&#xe600;</i> 选择文件</button>
  14. <button onclick="model_download()" class="btn btn-primary radius" ><i class="Hui-iconfont">&#xe600;</i> 下载模板</button>
  15. </span>
  16. </div>
  17. </div>
  18. </section>

二、JS脚本

<script type="text/javascript" src="/static/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript">
layui.use(‘upload’, function() {
var $ = layui.jquery;
var upload = layui.upload;
upload.render({
elem: ‘#up’
, url: ‘/test/uploadsave’
, data: {
‘_token’: function () {
return $(‘input[name=”_token”]’).val();
}
}

, accept: ‘file’ //普通文件
, done: function (res) {
if (res.code == 0) {
for (var i = 0; i < res.data.length; i++) {
$(“#log”).append(‘<div>‘ + res.data[i] + ‘</div>‘);
}
}
}
});
})

三、遇到的问题

1、无法选择上传文件,提示错误是upload.render未定义

反复查询,最后问题的解决还是在百度上看到,一位博主说是引入layui.js版本问题,果断换成最新版本,并将layui.all.js也一块引入,这个问题才得到解决。

2、错误代码419问题

代码419是_token没有上传,可是怎么传,根据文档和自己掌握的知识,这个问题这样解决了

  1. , data: {
  2. '_token': function () {
  3. return $('input[name="_token"]').val();
  4. }
  5. }

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论