⒉ 前端准备
- 页面引入layui 的 css 和 js 文件
<script type="text/javascript" src="layui/layui.js"></script><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><link rel="stylesheet" type="text/css" href="layui/css/layui.css" />注： 本人下载的 layui 框架源码包为
layui-v2.2.45
- 核心代码：
<div class="layui-form-item"> <div class="layui-upload"> <button type="button" name="img_upload" class="layui-btn btn_upload_img"> <i class="layui-icon"></i>上传图片 </button> <img class="layui-upload-img img-upload-view" src="upload/dog.jpg"> <p id="demoText"></p> </div> </div>- js 代码：
<script type="text/javascript"> 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('上传失败,请重新上传'); } }); });</script>⒊ 后端处理
- 因为前端 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));}
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。