js使用formData上传文件解决多个按钮触发同一个input type="file"标签问题

这篇其实上一篇要实现的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;
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,773评论 25 709
  • 作为一个前端程序猿,下面这些站会让你眼前一亮。 amazeui框架组建丰富 http://amazeui.org...
    欧巴冰冰阅读 8,938评论 18 303
  • 2018.6.15(470~337~36/99) 感恩一项一项工作落实,一步一个脚印前进。感恩新的领域开始进...
    方正省阅读 216评论 0 2
  • 郭店楚简《老子》应是孔子问礼的周守藏史老聃的原版“道德经”,和随后的《庄子》境界同,达到了物各付物、和光同尘的水平...
    新儒哲阅读 270评论 0 0
  • 我已然無处安放我的偏激與執著, 有人說,我需要一個出口 我需要告訴旁人 我在排除,你我之間 山南水北之間的距離 我...
    乙木々阅读 267评论 0 0