<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖拽图片上传表单代码 - 【更多源码：www.96flw.com】</title>
<link href="layui/css/layui.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="layui/layui.js" type="text/javascript"></script>
<script src="js/upload.js" type="text/javascript"></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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery拖拽图片上传表单代码.zip （12个子文件） 
jiaoben7058 js 
upload.js 5KB jquery.min.js 91KB
index.html 2KB layui layui.js 8KB font iconfont.woff 26KB css layui.css 68KB modules layer default layer.css 14KB
icon.png 11KB lay modules form.js 9KB upload.js 9KB layer.js 22KB element.js 7KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5850
