layui插件上传图片

最新推荐文章于 2023-05-29 22:05:05 发布

abiao555

最新推荐文章于 2023-05-29 22:05:05 发布

阅读量211

点赞数

文章标签： layui

本文链接：https://blog.csdn.net/abiao555/article/details/115673605

版权

这篇博客详细介绍了如何使用HTML和JavaScript实现一个学生证上传功能。通过layui上传组件，用户可以选择图片并上传到指定接口，支持限制上传文件类型、大小，并提供了上传成功和失败的回调处理。代码中包含了上传按钮、选择文件按钮以及已上传图片的展示。同时，博客还展示了错误处理和文件上传状态的控制。

摘要由CSDN通过智能技术生成

<div class="form-group" style="margin-bottom: 10px;width: 100%;">
<label for="student_card">学生证:</label>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default" id="test8">选择文件</button>
<button type="button" class="btn btn-primary" id="test9">开始上传</button>
</div>
</div>
或
<div class="layui-upload">
<label for="student_card">学号:</label>
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
<button type="button" class="layui-btn" id="test9">开始上传</button>
{if $dstrUserInfo['student_card']}<img src="/upload{$Info['student_card']}" width="150" height="150">{/if}
</div>

layui.use('upload', function(){
var upload = layui.upload;

//执行实例
var uploadInst = upload.render({
elem: '#test8' //绑定元素
,url: '/xxx/upload/' //上传接口
,auto: false //选择文件后不自动上传
,bindAction: '#test9' //指向一个按钮触发上传
,accept: 'images' //只允许上传图片
,acceptMime: 'image/*' //只筛选图片
,size: 1024*2 //限定大小
,field: 'stud_card_img' //设定文件域的字段名
,done: function(res, index, upload){
//上传完毕回调
if(res.status==0){
layer.msg(res.msg,{ icon: 2,shade: [0.3, '#393D49'],shadeClose:true });
}else{
layer.msg(res.msg,{ icon: 1,shade: [0.3, '#393D49'],shadeClose:true });
}

}
,error: function(index, upload){
console.log(index);
console.log(upload);
//请求异常回调
layer.msg("上传出错",{ icon: 2,shade: [0.3, '#393D49'],shadeClose:true });
}
});
});
</script>