layui表单中文件图片上传代码
代码语言:html
所属分类:上传
代码描述:layui表单中文件图片上传代码,使用jquery+layer+form+upload实现带进度条文件上传效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> </head> <body> <div class="layui-main" style="margin-top:100px;"> <form class="layui-form" method="post" action="javascript:;"> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-inline"> <input type="text" name="username" lay-verify="required" placeholder="输入名称" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">不能为空</div> </div> <div class="layui-form-item"> <label class="layui-form-label">图片上传</label> <div class="layui-inline"> <div class="layui-upload-drag" id="upload"> <i class="layui-icon"></i> <p>点击上传,或将文件拖拽到此处</p> </div> </div> <div class="layui-inline" id="upload_preview"></div> </div> <div class="layui-form-item layui-hide" id="upload_progress"> <label class="layui-form-label"></label> <div class="layui-input-inline" style="width:21%;"> <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress"> <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div> </div> </div> </div> <div class="layui-form-item layui-hide" id="upload_progress"> <label class="layui-form-label"></label> <div class="layui-input-inline" style="width:21%;"> <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress"> <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-inline"> <button class="layui-btn" lay-submit>提交表单</button> </div> </div> </form> </div> <script> $(function() { layui.use([ 'layer', 'element', 'form', 'upload' ], function() { var layer = layui.layer, element = layui.element, form = layui.form, upload = layui.upload; //创建监听函数 var xhrOnProgress = function(fun) { xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑 return function() { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } } var uploadFile = upload.render({ elem : '#upload', //绑定元素 url : 'api/upload', //上传接口 exts : 'jpg|png|jpeg',//限定上传类型 //accept: images,//指定允许上传时校验的文件类型 imag.........完整代码请登录后点击上方下载按钮下载查看
网友评论0