美文网首页
js使用formData上传文件解决多个按钮触发同一个input

js使用formData上传文件解决多个按钮触发同一个input

作者: 天谴残魂 | 来源:发表于2018-09-08 15:19 被阅读107次

    这篇其实上一篇要实现的Excel表格上传的前端代码



    CSS:

    /*美化input  type="file"标签*/
    <style>
    
    ::-ms-browse, [type='file'] {
        padding: .4em;
        line-height: 20px;
        border: 1px solid #46b8da;
        background: #5bc0de;
        color: #fff;
        border-radius: 3px;
    }
    ::-webkit-file-upload-button {
        padding: .4em;
        line-height: 20px;
        border: 1px solid #46b8da;
        background: #5bc0de;
        color: #fff;
        border-radius: 3px;
    }
    </style>
    

    HTML:

     <table style="margin: 5px; height: 70px;">
                    <tr>
                        <td>
                            <h4>上传学生教师个人信息</h4>
                        </td>
    
                    </tr>
                    <tr>
                        <td><span style="color: #f00">注:请优先上传班级信息再上传学生、教师信息,上传格式为Excel</span></td>
                    </tr>
                    <tr style="height: 10px"></tr>
                </table>
                <form class="form-horizontal" id="uploadForm" enctype="multipart/form-data" @*action="~/Data/ReadExcelToDataTable"*@ >
                    <table style="margin: 5px; height: 70px;">
                        <tr>
                            <td>请选择文件:</td>
                            <td>
                                <input  type="file" id="fileUpload" name="fileUpload">
                            </td>
                            <td>
                                <input class="btn btn-sm btn-info" type="button" value="上传班级信息" onclick="submitClass();" />
    
                            </td>
                            <td>
                                <input class="btn btn-sm btn-info" type="button" value="上传学生信息" onclick="submitStudent();"  style="margin-left:10px" />
                            </td>
                            <td>
                                <input class="btn btn-sm btn-info" type="button" value="上传教师信息" onclick="submitTeacher();" style="margin-left:10px" />
    
                            </td>
                        </tr>
                    </table>
                </form>
    

    JQ:

    function submitTest() {
        var fileName = $("#fileUpload").val();
    
        var ldot = fileName.lastIndexOf(".");
        var type = fileName.substring(ldot + 1).toLowerCase();
        if (type == "xls" || type == "xlsx") {
            var formData = new FormData($('#uploadForm')[0]);
            $.ajax({
                url: "/Data/UploadingStudent",
                type: "post",
                data: formData,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    alert(data);
                    
                },
                error: function (e) {
                    alert("上传错误请联系系统管理!!");
                    //window.clearinterval(timer);
                }
            });
        }
        else {
            alert("请选择exce表格文件!");
            $("#fileUpload").val("");
            return false;
        }
    }
    

    相关文章

      网友评论

          本文标题:js使用formData上传文件解决多个按钮触发同一个input

          本文链接:https://www.haomeiwen.com/subject/yuakgftx.html