代码:
uploadfile.html
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
/* layout.css Style */
.upload-drop-zone {
height: 200px;
border-width: 2px;
margin-bottom: 20px;
}
/* skin.css Style*/
.upload-drop-zone {
color: #ccc;
border-style: dashed;
border-color: #ccc;
line-height: 200px;
text-align: center
}
.upload-drop-zone.drop {
color: #222;
border-color: #222;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading" style="text-align: center;"><strong>上传文件</strong></div>
<div class="panel-body">
<!-- Standar Form -->
<h4>请选择文件</h4>
<form action="" method="post" enctype="multipart/form-data" id="js-upload-form">
<div class="form-inline">
<div class="form-group">
<input type="file" name="files[]" id="js-upload-files" multiple>
</div>
<button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">上传</button>
</div>
</form>
<!-- Drop Zone -->
<h4>或者将文件拖拽到这里</h4>
<div class="upload-drop-zone" id="drop-zone">
文件显示
</div>
<!-- Progress Bar -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">已上传 50% </span>
</div>
</div>
<!-- Upload Finished -->
<div class="js-upload-finished">
<h3>已上传文件</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a>
<a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-02.jpg</a>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<script>
function($) {
'use strict';
// UPLOAD CLASS DEFINITION
// ======================
var dropZone = document.getElementById('drop-zone');
var uploadForm = document.getElementById('js-upload-form');
var startUpload = function(files) {
console.log(files)
}
uploadForm.addEventListener('submit', function(e) {
var uploadFiles = document.getElementById('js-upload-files').files;
e.preventDefault()
startUpload(uploadFiles)
})
dropZone.ondrop = function(e) {
e.preventDefault();
this.className = 'upload-drop-zone';
startUpload(e.dataTransfer.files)
}
dropZone.ondragover = function() {
this.className = 'upload-drop-zone drop';
return false;
}
dropZone.ondragleave = function() {
this.className = 'upload-drop-zone';
return false;
}
}(jQuery);
</script>
</body>
</html>
截图: