利用jQuery實現拖拽圖片上傳表單代碼



20 79 27



特效描述:利用jQuery實現 拖拽圖片 上傳表單 代碼,利用jQuery實現拖拽圖片上傳表單代碼

代碼結構

1. 引入CSS

<link href="layui/css/layui.css" rel="stylesheet" />

2. 引入JS

<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>

3. HTML代碼

<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';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 文件上傳 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 上海时时乐开奖 内蒙古11选5技巧 极速快3开奖结果 黑龙江36选7今日开奖 查一下17125规律走势图 常见的手机赚钱软件是什么意思 重庆时时开奖直播器下 wow搬砖赚钱攻略 安徽快3走势图带连线 湖南快乐10分中奖规则 新疆25选7历史开奖 浙江福彩6十1规则 9号彩票平台黑钱 一局一元钱的现金麻将苹果系统 彩聊app计划软件下载 晓游游戏平台