单击按钮文件上传

最新推荐文章于 2024-08-20 17:59:44 发布

JabinJava

最新推荐文章于 2024-08-20 17:59:44 发布

阅读量6.3k

点赞数 2

分类专栏： point 文章标签：文件上传

本文链接：https://blog.csdn.net/JabinJava/article/details/89519476

版权

point 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript实现的Excel文件上传与解析的方法。通过创建一个隐藏的input file标签，用户可以选择.xls或.xlsx格式的文件进行上传。上传后，文件通过Ajax请求发送到服务器，服务器端处理并返回结果。

摘要由CSDN通过智能技术生成

 <button  id="uploadExcel" onclick="uploadExcel()"> 上传文件</button>
<script>
        /*导入Excel*/
        function uploadExcel() {
            /*#load:为按钮,点击后生成一个隐藏的input file标签*/
            $('#uploadExcel').after('<input type="file" id="upload_xls" name="file" style="display:none" onchange ="uploadFile()">');
            document.getElementById("upload_xls").click();
        }

        function uploadFile() {
            //选择文件
            var filePath = $("#upload_xls").val();
            //设置上传文件类型
            if (filePath.indexOf(".xls") != -1 || filePath.indexOf(".xlsx") != -1) {
                var form = new FormData();
                form.append('file', $('#upload_xls')[0].files[0]);
                //上传文件
                $.ajax({
                    url: 'uploadFile.do',
                    type: 'post',
                    data: form,
                    cache: false,
                    //阻止Ajax将参数转成成String类型的键值对，需要设置processData属性为false，
                    processData: false,
                    //form的enctype="multipart/form-data"才能上传文件。Ajax的默认编码方式是application/x-www-form-urlencoded
                    contentType: false,

                    success: function (r) {
                        if (r.state == 200) {
                            alert(r.msg);
                        }
                        if (r.state == 300) {//上传文件有错误信息
                            var filename = r.data;
                            if (confirm(r.msg)) {
                                location.href = 'download.do?filename=' + filename;
                            }
                        }
                    }
                });
            } else {
                alert("请选择正确的文件格式！");
                return false;
            }
        }
    </script>