layui表单中文件图片上传代码

代码语言:html

所属分类:上传

代码描述:layui表单中文件图片上传代码,使用jquery+layer+form+upload实现带进度条文件上传效果。

代码标签: layui 表单 文件 图片 上传 代码

下面为部分代码预览,完整代码请点击下载或在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