jQuery可拖拽文件上传预览效果代码



99 394 132



特效描述:jQuery 可拖拽文件上传 预览效果代码,jQuery可拖拽文件上传预览效果代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/ssi-uploader.css"/>

2. 引入JS

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/ssi-uploader.js"></script>

3. HTML代码

<div class="zzsc-container">
	<div class="container">
		<h3>注意:因为演示中没有后台上传程序的支持,点击上传按钮时会返回错误信息!</h3>
		<div class="row">
			<div class="col-md-12">
				<h3>基本演示(支持jpg、gif、txt、png和pdf格式文件)</h3>
				<input type="file" multiple id="ssi-upload"/>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<h3>无预览图效果:</h3>
				<input type="file" multiple id="ssi-upload2"/>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<h3>不带拖放区域:</h3>
				<input type="file" multiple id="ssi-upload3"/>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$('#ssi-upload').ssi_uploader({url:'#',maxFileSize:6,allowed:['jpg','gif','txt','png','pdf']});
	$('#ssi-upload2').ssi_uploader({url:'#',preview:false,allowed:['jpg','gif','txt','png','pdf']});
	$('#ssi-upload3').ssi_uploader({url:'#',dropZone:false,allowed:['jpg','gif','txt','png','pdf']});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 预览 图片拖动 图片拖拽 头像上传 图片上传 文件上传

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到