<!-- 此处省略css样式 -->
<div id="excelImport">
<input id="fileupload" type="file" style="display:none;" />
<div>点击上传文件</div>
</div>
<script>
// 此处省略引入的juqery
$("#excelImport").click(function() {
$('#fileupload').click();//此处会触发
});
$('#fileupload').change(function() {
var uploadFiles = $('#fileupload').prop('files');
$("#textfield").val(uploadFiles[0].name);
startUpload(uploadFiles)
})
</script>
然后发现了使用Bootstrap实现拖拽文件上传的Bootstrap实现拖拽文件上传https://blog.csdn.net/linhaiyun_ytdx/article/details/76212182
再结合美化文件上传样式https://blog.csdn.net/iaoyou1/article/details/80952962
<style>
.js-upload-finished {
margin-top: 20px;
}
.list-group {
margin-top: 10px;
}
.upload-drop-title {
margin: 20px 0 10px;
}
/* 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>
<body>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading" style="text-align: center;"><strong>上传文件</strong></div>
<div class="panel-body">
<!-- Standar Form -->
<div class="form-inline">
<div class="form-group">
<label for="fileupload">请选择文件:</label>
<input id="fileupload" type="file" name="fileupload" accept=".xls,.xlsx" multiple="" style="display:none;" />
<input type='text' class="form-control" name='textfield' id='textfield' autocomplete="off" readonly="readonly" />
<input id="excelImport" type="button" value="浏览" class="btn btn-success" />
</div>
</div>
<!-- Drop Zone -->
<div class="upload-drop-title">或者将文件拖拽到这里</div>
<div class="upload-drop-zone" id="drop-zone">
将文件拖拽到这里
</div>
<!-- Upload Finished -->
<div class="js-upload-finished"></div>
</div>
</div>
</div>
<!-- /container -->
<!-- 此处引入的文件需要根据自己的文件路径进行修改 -->
<script src="__PUBLIC__/Js/jquery-1.12.4.min.js"></script>
<script src="__PUBLIC__/Js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#excelImport").click(function() {
$('#fileupload').click();
});
$('#fileupload').change(function() {
var uploadFiles = $('#fileupload').prop('files');
$("#textfield").val(uploadFiles[0].name);
startUpload(uploadFiles)
})
});
$(function() {
// UPLOAD CLASS DEFINITION
// ======================
var dropZone = document.getElementById('drop-zone');
var uploadForm = $('#js-upload-form');
uploadForm.on('submit', function(e) {
var uploadFiles = $('#fileupload').prop('files');
e.preventDefault()
startUpload(uploadFiles)
})
dropZone.ondrop = function(e) {
e.preventDefault();
this.className = 'upload-drop-zone';
$("#textfield").val('');//清空手动浏览上传文件的input
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;
}
})
function startUpload(files) {
// 上传的文件
console.log(files)
$('.js-upload-finished').html(
'<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>' +
files[0].name + '</a></div>'
)
return
}
</script>
</body>
原文地址:https://blog.csdn.net/feifei9989/article/details/129493425
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_40190.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。