XH_Digital_Management/templates/upload_excel_modal.html

54 lines
2.3 KiB
HTML

<div id="uploadModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="uploadModalLabel">上传文件</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- 上传表单 -->
<form id="upload-form" enctype="multipart/form-data">
<input type="file" class="form-control" id="inputGroupFile01" hidden accept=".xlsx">
<label class="btn btn-outline-primary" for="inputGroupFile01">选择文件</label>
<span id="file-chosen" style="font-size: 12px; margin-left: 10px;">未选择文件</span>
</form>
</div>
<div class="modal-footer">
<a href="{{ download_template_url }}" class="btn btn-secondary">下载模板</a>
<button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="uploadBtn">上传</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// 当选择文件变化时,更新文件名显示
$('#inputGroupFile01').on('change', function() {
var fileName = $(this).val().split('\\').pop();
$('#file-chosen').text(fileName || '未选择文件');
});
// 处理上传按钮的点击事件
$('#uploadBtn').on('click', function() {
var formData = new FormData($('#upload-form')[0]);
$.ajax({
url: '{{ parse_excel_url }}', // 使用从父模板传递的URL
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
// 上传成功后的回调函数
$('#uploadModal').modal('hide');
// 其他逻辑...
},
error: function(xhr, status, error) {
// 上传失败的回调函数
// 错误处理...
}
});
});
});
</script>