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