jQuery拖拽批量上傳文件顯示預覽圖片代碼



99 394 132



特效描述: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

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

湖北30选5开奖结果走势图表