1、新建html文档。
2、书写hmtl代码。
<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>
3、书写css代码。
body, html { font-size: 100%; padding: 0; margin: 0; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body { font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }
4、书写并添加js代码。
<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/jquery.imageuploader.js"></script>
<script>
(function(){
var options = {};
$('.js-uploader__box').uploader({
'selectButtonCopy':'请选择或拖拽文件',
'instructionsCopy':'你可以选择或拖拽多个文件',
'submitButtonCopy':'上传选择的文件',
'furtherInstructionsCopy':'你可以选择或拖拽更多的文件',
'secondarySelectButtonCopy':'选择更多的文件',
});
}());
</script>
5、代码整体结构。
6、查看效果。
