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); });