ajax實現檔案上傳

阿新 • • 發佈：2021-06-28

使用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方法使用不理解。稍微修改了一下完成檔案呢上傳了