layui表单中文件图片上传代码-html代码-BFW代码库

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-bl.........完整代码请登录后点击上方下载按钮下载查看