jQuery拖拽批量上传文件插件

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、查看效果。