layui 上传组件后台代码分享( PHP 和 Java 的版本)

分享 未结 精帖
37 16894
我擦这么菜
悬赏:20飞吻
看到一些人整天在问layui的上传组件怎么用,其实文档里面写的非常清楚了,今天我就来说一些怎么使用Layui的上传组建把,其他的优化需要自己去完善,别指望别人全部给你弄好,都是写代码的,这点常识要有,别一味的伸手。

这是我第一次用upload,以前没用过,就是为了写这个案例才看了一下文档(不是想说我多牛逼,文档真心很详细自己看看就知道了,新手除外,新手们先把基础掌握了再看把)

先看看官方文档

官方的文档说的很清楚,返回的json格式只支持这种格式,那么就限制的后台返回的数据格式(这点有好也有弊把)

这是前端的代码(php和java的都是这个)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

<blockquote class="layui-elem-quote">为节省服务器开销,以下示例均未配置真实上传接口,所以每次上传都会报提示:请求上传接口出现异常,这属于正常现象。</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用:普通图片上传</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>指定允许上传的文件类型</legend>
</fieldset>

<button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
<button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传音频</button>
<div style="margin-top: 10px;">

<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设定文件大小限制</legend>
</fieldset>

<button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
<div class="layui-inline layui-word-aux">
这里以限制 60KB 为例
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>同时绑定多个元素,并将属性设定在元素上</legend>
</fieldset>

<button class="layui-btn demoMore" lay-data="{url: '/a/'}">上传A</button>
<button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上传B</button>
<button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上传C</button>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>选完文件后不自动上传</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
<button type="button" class="layui-btn" id="test9">开始上传</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>拖拽上传</legend>
</fieldset>

<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>高级应用:制作一个多文件列表</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>绑定原始文件域</legend>
</fieldset>

<input name="file" id="test20" type="file">


<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;

//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,exts: 'zip|rar|7z|ini|jpg|png' //设置一些后缀,用于演示前端验证和后端的验证
,url: 'http://localhost:8080/xxxxxxx/mmmmmm/uploadTest'//http://127.0.0.1:81/xxxxxxxThinkPHP/Home/index //这里是两个版本的上传地址
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.code == 500){
return layer.msg('上传失败,'+res.msg);
}else{//上传成功
layer.msg('上传成功,'+res.data.src);
}
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});

});
</script>

</body>
</html>
前端都是用的这个,我是直接copy文档里面的这段代码,其他的我删除了,没卵用(对于demo)
好了先说一些在ThinkPHP3.2.3下如何使用上传
$result = array("code"=>200,"msg"=>"","data"=>array("src"=>""));
$fileName = "file";
if(!empty($_FILES[$fileName])){//选择了图片
$upload = new \Think\Upload(array(
'maxSize' => 10*1024*1024,//最大上传文件的大小限制(10M)
'savePath' => '',//
'saveName' => time().mt_rand(), //上传文件名命名方式
'exts' => array('jpg', 'gif', 'png', 'jpeg','txt'),//允许上传的文件类型
'autoSub' => true,
'subName' => array('date','Y/m/d'),//保存文件夹格式
));// 实例化上传类
$info = $upload->upload();// 上传文件(多文件,单文件都行)
if(!$info){//上传错误提示错误信息
$result["code"] = 500;$result['msg'] = $upload->getError();
}else{
$result['msg'] = "上传成功";$result["data"]['src'] = $upload->rootPath.$info[$fileName]['savepath'].$info[$fileName]['savename'];
}
}else{
$result["code"] = 500;$result['msg'] = "表单name没有file";
}
$this->ajaxReturn($result);
ThinkPHP的上传可以参考官方的文档里面有详细的案例代码,下面是上传抓包的数据包,注意箭头的位置

name是表单的标识,filename是上传的文件名,后台都是根据name获取上传的文件
如果不懂的请自己百度一下:上传文件流
上传失败的


上传成功的



php的就这样简单,如果用的原生的php代码那么用$_FILE['file']就能拿到上传的文件

下面说说java的上传(SpringMVC框架)
Controller的代码
@ResponseBody
@ControllerLog(operating = "layui上传测试")
@RequestMapping("/uploadTest")
public Map<String,Object> uploadTest(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request){
Map<String,Object> result = wifiCapService.uploadTest(file, request);
return result;
}
ServiceImpl的代码
//layui测试
public Map<String, Object> uploadTest(MultipartFile file, HttpServletRequest request){
Map<String, Object> result = new HashMap<String, Object>();

this.rootPath = request.getServletContext().getRealPath("/").replace("\\", "/");//上传文件的跟路径

final String uploadPath = "Uploads/" + new SimpleDateFormat("yyyy/MM/dd").format(new Date());//上传的组合路径

final String fileName = file.getOriginalFilename(); //上传的文件名

File saveFile = new File(this.rootPath + uploadPath, fileName);

if(!saveFile.exists())
saveFile.mkdirs();//目录不存在,递归创建
if(Arrays.asList(suffixs).contains(getSuffix(saveFile.getName())) == false){//上传文件名检查(白名单机制)true:通过,false:没有通过
result.put("code", 500);result.put("msg", "上传文件格式不支持");
}else{
try {
file.transferTo(saveFile);//保存文件
result.put("code", 200);result.put("msg", "上传成功");
result.put("data", new HashMap<String, Object>() {
{
put("src", uploadPath + "/"+ fileName);
}
});
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

return result;
}

/**
* 文件后缀
* @return
*/
public String getSuffix(String name) {
String suffix = name;
if(suffix.contains("."))
suffix = suffix.substring(suffix.lastIndexOf("."));
else
suffix = "";
return suffix;
}
上传效果演示






以上代码仅供参考,如果你想直接copy就能用的话,那你就放弃把,自己动手学到的才是你的。如果学习的时候不懂的,在这里评论,我看到了会回复你。
回帖
  • 我也是做后端的,其实只有看明白最后返回的json结构就很简单。。。不管是PHP,ASP,ASP.NET,JSP,都一样。。

    图片名称:CNM?弄和谐点的图片吧。。。。。。[嘻嘻]
    3 回复
  • 2 回复
  • 春末
    2017-12-21


    返回格式可以不用固定的


    上传组件很简单的
    1 回复
  • 猫吃
    2017-12-21
    @我擦这么菜 你上传限制个数能用么?我用文档中的不能。。
    1 回复
  • 猫吃
    2017-12-22
    @我擦这么菜 好吧 ,我去尝试
    1 回复
  • 松仁
    2017-12-23
    1 回复
  • @快乐浪子哥 以前测试中文上传的时候弄的,见笑了[嘻嘻]
    0 回复
  • ‭‭869
    2017-12-21
    [嘻嘻]
    0 回复
  • 超人
    2017-12-21
    @快乐浪子哥 棒棒的
    0 回复
  • ajax
    2017-12-21
    图片名好评
    0 回复
  • 暴躁老哥。。。666
    0 回复
  • 微恙
    2017-12-21
    ie8使用上传时候,
    //获取当前触发上传的元素,一般用于 elem 绑定 class 的情况,注意:此乃 layui 2.1.0 新增
    var item = this.item;
    上传后这里获取不到当前elem对象,打印获取是undefined应该怎么办
    0 回复
  • @微恙 最好截图说明,或者发帖问问大家。
    0 回复
  • 微恙
    2017-12-21
    @我擦这么菜

    页面有多个上传按钮,所以根据文档使用
    var item = this.item;
    来获取当前元素后并把服务端返回的路径展示在页面上,主流浏览器是可以的,ie8在控制台会提示
    是这个不支持ie8?还是需要设置其他的?谢谢大佬回复。
    0 回复
  • Akun
    2017-12-21
    [哈哈] 这图片名,是不是最近需求改的有点多啊?
    0 回复
  • @Akun 都是老司机啊[哈哈]
    0 回复
  • @微恙 不是ie8你这段代码走的通吗?你换个其他浏览器试试
    0 回复
  • 微恙
    2017-12-21
    @我擦这么菜 嗯,走的通,上面也说了,主流浏览器都可以,ie10标准也可以,但是ie8、ie9都会出现上述错误。
    0 回复
  • 我就是来试试发图片的 不是广告 抱歉 为啥我发图片就解析不出来
    0 回复
  • @微恙 那这种问题你就要问问作者了,一半能行,一半不行,那就可能是兼容性的问题了。
    0 回复
  • 微恙
    2017-12-21
    @我擦这么菜 好的,谢谢
    0 回复
  • 分享不错,只是图片名有点不太好
    0 回复
  • @飘飘雨下 这才能表现出程序员的心情。[泪]
    0 回复
  • @猫吃 如果你要限制个数可以前台设置(文档里面有),如果无效,后台也能稍微限制一下,把上传成功的数量保存到cookie或者session里面
    0 回复
  • [哈哈] [哈哈] [哈哈] [哈哈] 谢谢分享 ,但是为啥我看着啰嗦呢 说好的精简呢
    0 回复
  • @用个名字真难 已经比较简单了,代码不多,能力有限,有大牛更简单,但是不愿意分享[嘻嘻]
    0 回复
  • 温柔9090
    2017-12-22
    暴躁老哥[哈哈]
    0 回复
  • 房
    2017-12-22
    一个贼煞笔的问题坑了我一天的情况下,我就会在注释里面来一句,cnm。。然后这辈子我都会记住他,到现在我还记得。。。。他奶奶的,前台传递过来的加密数据,在url中传输的时候莫名其妙多了几个空格。。。。到现在我都记得。。[泪]
    0 回复
  • @ 图片(注释)才能表达我的心情[偷笑]
    0 回复
  • 0 回复
本帖已设置禁止回复