php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景
昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错
♪ 分析
⒈ 问题所在
最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制
⒉ 解决方案
一般在表单提交时,都会存放一个隐藏的输入框
或者在需要提交的表单中补充一行代码:
{{ csrf_field() }} ...
但是,在比较单一的元素进行 ajax 提交时,建议可使用如下的方法
①. 页面中添加隐藏域
②. ajax 请求前,先获取 csrf_token() 值
var tag_token = $(".tag_token").val();
③. ajax 请求时,将该值作为数据的一部分传输过去,例如:
data:{'_token':tag_token}
♫ 实现步骤
⒈ 源文件目录
⒉ 前端准备
页面引入layui 的 css 和 js 文件
注: 本人下载的 layui 框架源码包为 layui-v2.2.45
核心代码:
上传图片
js 代码:
layui.use('upload', function(){
var upload = layui.upload;
var tag_token = $(".tag_token").val();
//普通图片上传
var uploadInst = upload.render({
elem: '.btn_upload_img'
,type : 'images'
,exts: 'jpg|png|gif' //设置一些后缀,用于演示前端验证和后端的验证
//,auto:false //选择图片后是否直接上传
//,accept:'images' //上传文件类型
,url: 'upload.php'
,data:{'_token':tag_token}
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('.img-upload-view').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.status == 1){
return layer.msg('上传成功');
}else{//上传成功
layer.msg(res.message);
}
}
,error: function(){
//演示失败状态,并实现重传
return layer.msg('上传失败,请重新上传');
}
});
});
⒊ 后端处理
因为前端 Layer 默认的是 POST 请求,则后台 uplaod.php 核心代码如下:
if ($_POST) {
//上传图片具体操作
$file_name = $_FILES['file']['name'];
//$file_type = $_FILES["file"]["type"];
$file_tmp = $_FILES["file"]["tmp_name"];
$file_error = $_FILES["file"]["error"];
$file_size = $_FILES["file"]["size"];
if ($file_error > 0) { // 出错
$message = $file_error;
} elseif($file_size > 1048576) { // 文件太大了
$message = "上传文件不能大于1MB";
}else{
$date = date('Ymd');
$file_name_arr = explode('.', $file_name);
$new_file_name = date('YmdHis') . '.' . $file_name_arr[1];
$path = "upload/".$date."/";
$file_path = $path . $new_file_name;
if (file_exists($file_path)) {
$message = "此文件已经存在啦";
} else {
//TODO 判断当前的目录是否存在,若不存在就新建一个!
if (!is_dir($path)){mkdir($path,0777);}
$upload_result = move_uploaded_file($file_tmp, $file_path);
//此函数只支持 HTTP POST 上传的文件
if ($upload_result) {
$status = 1;
$message = $file_path;
} else {
$message = "文件上传失败,请稍后再尝试";
}
}
}
} else {
$message = "参数错误";
}
return showMsg($status, $message);
【注意】: 使用下载的源码文件时,可将该处的核心代码进行替换
补充公共函数 showMsg() :
function showMsg($status,$message = '',$data = array()){
$result = array(
'status' => $status,
'message' =>$message,
'data' =>$data
);
exit(json_encode($result));
}
⒋ 实现效果
♬ 补充
⒈ 注意事项 提供的代码,可用于 PHP 的原生开发或其他流行框架,其实只要后台能接收到 $_FILES 数据就好办了 我就是卡在了 Laravel 框架的 CSRF 认证上,耗费了好多时间,所以:
后端代码的图片上传功能属于原生程序,可自行优化,建议使用流行框架所推荐的集成方法。 ⒉ move_uploaded_file() 补充
对于上述的代码,需要注意一点 : move_uploaded_file() 方法的使用
如果图片所上传的目录不存在,很可能会报错,所以需要判断当前情况,若不存在,要建立新目录
//TODO 判断当前的目录是否存在,若不存在就新建一个!
if (!is_dir($path)){mkdir($path,0777);}
⒊ Laravel 中的处理 作为 PHP 开发的流行框架,必然做了对文件上传功能的集成,文件的上传,可参考学习文档,以本人的处理为例:
⑴. 相对于使用默认的上传方法,会将文件存放到 "storage" 目录中,而进一步对该目录的访问还需要添加软链接,感觉有点麻烦,所以我指定磁盘到 "public" 目录即可
⑵. 可参考我之前的一篇文章—— Laravel 文件上传功能实现 ,打开配置文件 config/filesystems.php ,向磁盘配置数组中添加一个 url
'upload' => [
'driver' => 'local',
'root' => public_path('upload/image/'.date('Ymd')),
],
⑶. 相对应的后台核心处理代码则为:
public function img_file(Request $request)
{
$status = 0;
$data = [];
if ($request->method()== 'POST') {
$date = date('Ymd');
$path = $request->file('file')->store('', 'upload');
if ($path){
$fileUrl = '/upload/image/'.$date.'/'.$path;
$status = 1;
$data['url'] = $fileUrl;
$message = '上传成功';
}else{
$message = "上传失败";
}
} else {
$message = "参数错误";
}
return showMsg($status, $message,$data);
}
如此一来,上传的图片所在目录为: public/upload/image/{$date}/
☺ 源码下载
总结
以上所述是小编给大家介绍的Laravel+Layer实现图片上传功能(整理篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)相关推荐
- html 头像选择,html5点击上传头像选取本地图片上传代码
特效描述:html5 点击上传头像 选取本地图片 上传代码.html5点击上传头像,图片上传代码 代码结构 1. HTML代码 上传头像 //获取上传按钮 var input1 = document. ...
- 直播平台软件开发,input限制上传数量,规定图片上传数量
直播平台软件开发,input限制上传数量,规定图片上传数量 /*** [fileCountCheck 上传文件数量检测]* @param {[Object]} filesObj [文件对象|input ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- HTML5输入框里加图片代码,做了一个input上传加号框,图片上传后显示在框中,怎么让加号消失?...
CSS代码: .div_imgall {border:1px solid blue;width:100px;height:100px;position:relative;} .input_flie { ...
- summernote 图片上传 php,summernote.js图片上传的使用
这是一个常用的富文本编辑器而已,特别注意(本地图片上传后,图片的宽度会固定,建议编辑一下,否则自适应时手机版会变成) 一.js部分 $(document).ready(function () { $( ...
- php 上传加水印,php 图片上传加水印(自动增加水印)
function upload($uploadfile,$watermark=1,$watertype=1,$content){ foreach($uploadfile['name'] as $key ...
- php网站商品图片上传代码,PHP实现图片上传代码
html代码 Document 上传图片: up.php代码 if (!empty($_FILES["img"]["name"])) { // 提取文件域内容名 ...
- moba上传文件到服务器,图片上传到远程服务器上的方法
图片上传到远程服务器上的方法 内容精选 换一换 将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows ...
- java图片如何上传_Java如何将图片上传到服务器
Java如何将图片上传到服务器 发布时间:2020-11-10 17:28:18 来源:亿速云 阅读:96 作者:Leah 这篇文章将为大家详细讲解有关Java如何将图片上传到服务器,文章内容质量较高 ...
最新文章
- 【国内首家】第一个基于语音生成实时知识图谱的系统来啦!!!
- layout-maxWidth属性用法
- fork()子进程与父进程之间的文件描述符问题
- Redis常用配置参数详解及查看修改命令
- 信息学奥赛C++语言:输出判断
- Java Log4j日志简单配置
- oracle查询约束的关联表,几种容易查询Oracle中表的约束信息
- 如何使用git把本地代码上传(更新)到github上
- linux gvim字体大小配置,Gvim 字体大小设置
- 全新自助任务平台WQ源码对接微信带分类信息线报完美运营驴赚网全量开源发布
- 前端使用身份证阅读器(高拍仪)集成vue项目
- 心理学和人工智能第一部分 心理学(四)—— 心理学的主要学派以及对人工智能的价值
- Combo用户板中XG-PON资源利用率的提升方案
- HTML如何画一条分割线_div之间设置间隔
- 美的智能SPA微气泡可视化冲牙器体验
- python登录面向对象_python基础 面向对象一
- c语言中MAXINE,13岁高定设计师二度亮相北京时装周 Maxine WangGrace Chen高定系列发布...
- 先帝爷下南阳御驾三请,联东吴灭曹魏鼎足三分~~~
- Unity3d导出的安卓包如何在真机上看log打印
- 用友U8+ V16.0 V15.1 V15.0 V13.0 V12.5 12.1 12.0 11.1 11.0注册
热门文章
- Java集合Vector
- java基础提升篇:Java中Native关键字的作用
- Eclipse导入项目常见问题----jdk版本问题(有个红色感叹号)01
- Android代码混淆及反编译
- 给solr配置中文分词器
- 高斯拟合原理_AlexNet原理和实现
- do while循环语句_Python 自学笔记 - while 循环语句
- URLEncoder和URLDecoder(乱码处理)
- 录音转成文字 android,安卓手机自带的录音转文字功能这么强大,堪称会议神器!你会用吗...
- mysql的存储过程原理_mysql存储过程原理与用法详解