使用Ajax實現文件上傳

這個作業屬於哪個課程	2021春軟件工程實踐/S班
這個作業要求在哪里	作業要求
這個作業的目標	從個人技術學習角度和團隊開發技術角度中選擇你最擅長的一個相關技術，進行分析描述並總結
其他參考文獻	csdn

使用Ajax實現文件上傳
第一部分技術概述
第二部分技術詳述
第三部分技術使用中遇到的問題和解決過程。
第四部分總結
第五部分參考文獻，博客

第一部分技術概述

在前端實現文件上傳，此次團隊作業中的助教評分系統在上傳學生或助教名單的情況時要使用exce文件上傳，所以需要該技術，最大的難點在於ajax的使用。

這是實現后的圖片

第二部分技術詳述

一，首先是html代碼，這里使用的是layui框架，主要設置了一個可選擇的班級，一個文件選擇按鈕和一個提交按鈕（下載模板是另一位前端同學寫的）。


        <div id="message_form">

            <div class="input-group">
                <div style="display: inline">
                    <span class="input-group-addon" >選擇班級：</span>
                </div>
                <div style="display: inline">
                    <select id="classId" name="classId" class="layui-select">
                        <option value="">請選擇班級</option>
                    </select>
                </div>
            </div>
            <div class="display-inline">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2">評分項上傳：</span>
                    <input id="file_upload" type="file" name="file_upload">
                </div>
                <div class="input-group">
                    <button id="down_load_model" onclick="downLoadModel()" class="layui-btn">下載模板</button>
                </div>
            </div>
            
            <button id="jquery_post" class="layui-btn" onclick="onClicked()">提交</button>
        </div>
    </div>

二，之后就是加載下拉列表的內容，通過從后端獲取到關於班級的數據，然后返回給前端


    $(document).ready(function () {
        //加載下拉列表的內容
        $.ajax({
            type: 'post',
            url: 'http://1.15.129.32:8888/score/class/showlist',
            dataType: 'json',
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Token", localStorage.token);
            },
            success: function(data){
                $.each(data.data,function (index,item) {
                    $("#classId").append("<option value='"+data.data[index].id+"'>"+data.data[index].className+"</option>");
                });
            }
        });
    });

三、接下來對前者的文件是否存在，文件類型以及大小是否符合進行判斷

        var $file1 = $("input[name='file_upload']").val();//用戶文件內容(文件)
        // 判斷文件是否為空
        if ($file1 == "") {
            alert("請選擇上傳的目標文件! ");
            return false;
        }

        //判斷文件類型,我這里根據業務需求判斷的是Excel文件
        var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase();
        if(fileName1 != "xls" && fileName1 !="xlsx"){
            alert("請選擇Execl文件!");
            return false;
        }

        //判斷文件大小
        var size1 = $("input[name='file_upload']")[0].files[0].size;
        if (size1>104857600) {
            alert("上傳文件不能大於100M!");
            return false;
        }

四.接着就是最關鍵的ajax實現文件上傳，它是通過Formdata實現的。（FormData類型其實是在XMLHttpRequest 2級定義的，它是為序列化表以及創建與表單格式相同的數據（當然是用於XHR傳輸）提供便利）。

		//創建一個form實例
		var form=new FormData();
		//調用append（）方法添加數據
        var classId = $("#classId").val();
        form.append("excel",$("#file_upload")[0].files[0]);
        form.append("classId",classId);
		//ajax實現單個文件的上傳
		$.ajax({
            url:"http://1.15.129.32:8888/student/import",
            type:"POST",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Token", localStorage.token);
            },
            data:form,
            contentType: false,
            processData: false,
            success:function(data){
                if(data.code == '200'){
                    alert("上傳成功！");
                }
            }
        })

流程圖的詳細描述

第三部分技術使用中遇到的問題和解決過程。

問題：與后端進行接口對接時不能將文件以正確格式傳輸過去

解決方法：在檢查代碼之前改使用 XMLHttpRequest 對象方法

        // XMLHttpRequest 對象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
            alert("上傳完成!");
        };

在隊友的幫助下，發現是自己的 contentType屬性設置錯誤，以及對append方法使用不理解。稍微修改了一下完成文件呢上傳了