jq文件上传及下载
一、使用jquery.form.js上传文件
jquery.form.js获取地址:https://pan.baidu.com/s/1nSdfkCt25Rc5cHMFJRVcUQ
提取码: sbmt
在网页中先引用jquery文件,再引用jquery.form.js文件
二、上传文件示例
html
<form id="uploadForm" enctype="multipart/form-data"> <label for="file">上传所有学生</label> <input type="file" name="file"/> <button class="upfile">上传</button> <button class="deletefile">删除</button> </form>
js
//获取文件后缀 function getFileType(filePath){ var startIndex = filePath.lastIndexOf("."); if(startIndex != -1) return filePath.substring(startIndex+1, filePath.length).toLowerCase(); else return ""; } //文件上传所有学生 $('.upfile').on('click', function() { let filevalue = $('input[name="file"]').val() let fileType = getFileType(filevalue) if(fileType !== 'xls' && fileType !== 'xlsx'){ alert("请上传xls/xlsx类型的文件!") $('input[name="file"]').val(""); return; } var options = { type: 'POST', url: 'http://7ip8b4.natappfree.cc/student/upload_students', dataType: 'json', xhrFields:{ withCredentials:true }, success: function(data) { if(data.status === 20000) { alert("上传成功!"); $('input[name="file"]').val(""); } else { alert("上传失败!"); $('input[name="file"]').val(""); } }, error : function(xhr, status, err) { alert("操作失败"); } }; $("#uploadForm").submit(function(e){
e.preventDefault() $(this).ajaxSubmit(options); return false; //防止表单自动提交 }); }) //文件删除 $('.deletefile').on('click', function() { $(this).siblings('input').val(""); });
三、下载文件
html
<a class="down-salary" download>导出薪资表</a>
js
$('.down-salary').on('click', function() { let startDate = $('select[name="classify"] option:selected').val();//所需参数 let stuName = $("#uname").val().trim();//所需参数
$('.down-salary').attr('href',"http://7ip8b4.natappfree.cc/mages/download_excel?stuName=" + stuName + "&startDate=" + startDate); });