excle导入 文件file上传ajxa请求

第一次写导入excle文件的功能,需求点击选择文件上传,然后点击确定后文件上传请求后台接口,保存数据.最初选择layui的 upload控件,发现它有两种方式,一时点击选择文件就触发请求后台接口,不符合我现在的需求;另外一种就是点击上传文件,然后在点击其他按钮事件触发后台接口的请求,问题是这里要求文件的格式只能是图片,最终选择放弃,选择了最原始的 input  type = " file "  下面是前端页面的代码,以及ajax的请求代码

<div>
    <div class="contain">
        <div class="wenzi">附件上传</div>
        <div class="form_msg">
            <form action="" enctype="multipart/form-data" method="post" >
                <input id="file" type="file"  name="file" />
                <button type="button" class="xiazai" id="excleMuban">Excel模板下载</button>
            </form>
            <div class="rec_buttom">
                <button class="layui-btn layui-btn-normal" id="save">确定</button>
                <button class="layui-btn layui-btn-normal" id="cancel">取消</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#cancel').click(function() {
            parent.location.reload();
        })
        $("#excleMuban").click(function(){
            //调用导出接口
            window.location.href='${ctx}/exindustry/exportTemplate';
        });
        $("#save").click(function(){
            var fileM=document.querySelector("#file");
            //获取文件对象,files是文件选取控件的属性,存储的是文件选取控件选取的文件对象,类型是一个数组
            var fileObj = fileM.files[0];
            // 创建
            var formData = new FormData();
            // 获取文件
            formData.append("file", fileObj);
            console.log(formData)
            $.ajax({
                url: '${ctx}/exindustry/upload',
                type: "post",
                dataType: "json",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    if(result.code==0){
                        layer.msg(result.msg,{icon: 6,time:2000}, function () {
                            //重新加载父页面
                            parent.location.reload();
                        });
                    }else {
                        layer.msg(result.msg,{icon: 5,time:2000});
                    }
                },
            });
        });
    })
</script>

springMVC文件的配置  这里可以设置支持文件的格式,以及文件的大小,这里我没有写,需要

<!-- 支持文件上传 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设定默认编码 -->
        <property name="defaultEncoding" value="UTF-8"></property>

    </bean>

猜你喜欢

转载自www.cnblogs.com/yjava/p/12040343.html
今日推荐