原生的html js 做的文件上上傳

html 

<div>
            <div class="row" style="border-top: 0.0rem;margin-bottom: 0.15rem;padding-top: 0.0rem">
                <div class="upload_container" style="display: flex; justify-content: flex-start;">
                    <label class="el-form-item__label">選擇文件:</label>
                    <div class="upload_input" id="upload" style="margin-left: 250px">
                        <button type="button" class="btn_default query_search_btn import_btn"
                                onclick="showSelectFileWin();">
                            Choose File
                        </button>
                        <span id="showFileName" class="file_name_show">
                        No file chosen
                    </span>
                        <input type="file" @change="onChangeFile($event)" id="file" class="upload_input_area"
                               style=" display: none" name="file"/>
                    </div>
                </div>
            </div>
        </div>

<input type="button" onclick="uploadFormCancel" value="取消"/>

<input type="button" onclick="uploadFile($event)" value="上傳"/>

 

js 

/**
         * 選擇文件事件
         * @param event 事件觸發點
         * @return {boolean}
         */
        onChangeFile: function (event) {
            vm.file = "";
            $("#showFileName").html("未選擇文件");
            $("#showFileName").removeAttr("title");
            var str = $("#file").val();
            var index = str.lastIndexOf('.');
            var photoExt1 = str.substr(index, 5).toLowerCase();
            var photoExt2 = str.substr(index, 4).toLowerCase();
            if (photoExt1 != '' && !(photoExt1 == '.xlsx' || photoExt2 == '.xls')) {
                this.$message({
                    message: '請上傳xlsx/xls文件!',
                    type: 'warning'
                });
                $("#file").val("");
                vm.isNeedFileExtension = false;
                return false;
            } else {
                var maxsize = 2 * 1024 * 1024;//2M
                var file = event.target.files[0];
                var fileSize = file.size;

                if (fileSize > maxsize) {
                    this.$message({
                        message: '上傳的文件不能大於2M',
                        type: 'warning'
                    });
                    $("#file").val("");
                    vm.fileSizeIsFit = false;
                    return false;
                } else {
                    vm.file = file;
                    $("#showFileName").attr("title", vm.file.name);
                    $("#showFileName").html(vm.file.name);
                    vm.isNeedFileExtension = true;
                    vm.fileSizeIsFit = true;
                }
            }
        }, /**
         * 上傳選擇的文件
         * @param event
         */
        uploadFile: function (event) {
            if ($("#showFileName").text() == "No file chosen") {
                this.$message({
                    message: '請選擇文件',
                    type: 'warning'
                });
            } else if (!vm.isNeedFileExtension) {
                this.$message({
                    message: '請上傳xlsx/xls文件!',
                    type: 'warning'
                });
            } else if (!vm.fileSizeIsFit) {
                this.$message({
                    message: '上傳的文件不能大於2M',
                    type: 'warning'
                });
            } else {
                event.preventDefault();
                var formData = new FormData();
                formData.append('file', this.file);
                formData.append('token', this.token);
                var url = baseURL + 'informationManagement/taxpayerInformationManagement/import';
                var loading = vm.getLoading("上傳中...");
                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    dataType: "json",
                    cache: false,//上傳文件無需緩存
                    processData: false,//用於對data參數進行序列化處理 這里必須false
                    contentType: false, //必須
                    success: function (response) {
                        console.log(response)
                        loading.close();
                        $("#showFileName").html('未選擇文件');
                        if (response.code == 0) {
                            this.$message({
                                message: response.msg,
                                type: 'success'
                            });
                            //vm.query();
                            //vm.uploadDialog = false;
                            /* var para = {
                                 'fileNumber': vm.aId
                             };*/
                            //vm.findFileList(para);

                            /* var pdfName = "";
                           for (var i = 0; i < response.list.length; i++) {
                                var data = response.list[i];
                                if (data.readPdfSuccess) {
                                    pdfName += '<p>文件：' + data.pdfName + '&nbsp;成功</p>';
                                    electron.listData.push(data);
                                } else {
                                    pdfName += '<p style="color: red">文件：' + data.pdfName + '&nbsp;失敗</p>';
                                }
                            }
                            $("#pdfName").append(pdfName);*/
                        } else {
                            loading.close();
                            this.$message.error('系統錯誤！請稍后再試！');
                        }
                    },
                    error: function (response) {
                        loading.close();
                        this.$message.error('系統錯誤！請稍后再試！');

                    }

                });
            }
        },

/**
 * 顯示選擇文件的窗口
 */
function showSelectFileWin() {
    $("#file").val("");
    $("#file").click();
}