jQuery拖拽批量上传文件显示预览图片代码



109 434 145



特效描述:jQuery 拖拽批量上传 预览图片,jQuery拖拽批量上传文件显示预览图片代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link href="dist/styles.imageuploader.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/jquery.imageuploader.js" type="text/javascript"></script>

3. HTML代码

<section role="main" class="l-main" style="margin-top:50px;margin-bottom:50px;">
	<header class="site-header">
		<h1 class="site-title l-site-title" style="font-size:1.2em;">jQuery拖拽批量上传文件插件</h1>
	</header>
	<div class="uploader__box js-uploader__box l-center-box">
		<form action="#" method="POST">
			<div class="uploader__contents">
				<label class="button button--secondary" for="fileinput">请选择文件</label>
				<input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
			</div>
			<input class="button button--big-bottom" type="submit" value="Upload Selected Files">
		</form>
	</div>
</section>
<script type="text/javascript">
(function(){
	var options = {};
	$('.js-uploader__box').uploader({
		'selectButtonCopy':'请选择或拖拽文件',
		'instructionsCopy':'你可以选择或拖拽多个文件',
		'submitButtonCopy':'上传选择的文件',
		'furtherInstructionsCopy':'你可以选择或拖拽更多的文件',
		'secondarySelectButtonCopy':'选择更多的文件',
	});
}());
</script>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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