layui多文件上传讲解_layui文件上传的实际应用实例

PHP文件上传在实际应用中非常常见, 然单独写上传是很麻烦的, 原生的表单上传用户体验性也非常差, 这里通过layui文件上传插件与TP的文件上传类进行结合, 实例方便好用的文件上传操作。

1. 到layui官方网站下载layui插件

2. 加载layui.css及layui.js文件

3. HTML应用

上传图片 //点击上传图片

上传图片显示

//上传图片后返回的文件名

4. layui应用:

//一般直接写在一个js文件中

layui.use(['upload','jquery'], function(){

/* var layer = layui.layer,form = layui.form;*/

var $ = layui.$;//重点处

var upload = layui.upload;

//普通图片上传

//执行实例

var uploadInst = upload.render({

elem: '#test1' //绑定元素

,url: '{:url("/index/stu/upfile")}' //上传接口PHP 接收文件

,field:'pics'

,before: function(obj){

//预读本地文件示例，不支持ie8

obj.preview(function(index, file, result){

$('#demo1').attr('src', result); //图片链接(base64)

});

}

,done: function(res){

$("#filename").val(res.filename);

//上传完毕回调

}

,error: function(){

//请求异常回调

}

});

});

5. TP5文件上传类接收

public function upfile(){

$file = $this->request->file('pics');

$filename = "";

if($file){

$info = $file->move(ROOT_PATH . 'public' . DS . 'up');

if($info){

$filename = $info->getSaveName();

}

}

$data = array('msg'=>'上传成功','filename'=>$filename);

echo json_encode($data);

}

6. 应用效果如下: