Ajax上传文件（包含文件的类型，大小验证）

最新推荐文章于 2022-08-09 23:15:05 发布

粟西米

最新推荐文章于 2022-08-09 23:15:05 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ajax 前端常用代码

本文链接：https://blog.youkuaiyun.com/qq_36345181/article/details/79928558

常用代码同时被 3 个专栏收录

15 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

ajax

4 篇文章

订阅专栏

本文介绍了如何使用Ajax进行文件上传，并结合JavaScript进行文件类型的检查和大小限制，确保上传的安全性和有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS代码块：

<script>
    //  上传文件
    $(function() {
        $("#button").click(function() {
                if ($("#website-title").val() == "") {
                    alert('文件名称不能为空！\r\n')
                    return false;
                }
                if ($("#id-input-file-2").val() == "") {
                    alert('请选择上传的文件！);
                    return false;
                }
                //判断文件上传类型
                var fileSize = 0;
                //文件类型
                var filetypes = [".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
                var filepath = document.getElementById("id-input-file-2").value;
                var isnext = false;
                var fileend = filepath.substring(filepath                                   .lastIndexOf("."));
                if (filetypes && filetypes.length > 0) {
                    for (var i = 0; i < filetypes.length; i++) {
                        if (filetypes[i] == fileend) {
                            isnext = true;
                            break;
                        }
                    }
                }
                if (!isnext) {
                    alert('不接受此文件类型,请上传zip格式的文件！\r\n');
                    return false;
                }

                //判断上传文件的大小
                fileSize = document.getElementById("id-input-file-2").files[0].size;
                var size = fileSize / 1024;
                var filemaxsize = 1024 * 2;//2M
                if (size > filemaxsize) {
                    alert('附件大小不能大于' + filemaxsize / 1024 +'M！\r\n', );
                    return false;
                }

                else {
                    var form = new FormData(document                                        .getElementById("tf"));
                    $.ajax({
                            url : "${pageContext.request.contextPath}/newdeploy.action",
                            timeout : 300000,
                            dataType : "json",
                            type : "post",
                            data : form,
                            processData : false,
                            contentType : false,
                            success : function(res) {
                                    if (res.code == 0) {
                                        alert("上传成功！")
                                    } else {
                                            alert("上传失败！")                                              }

                            }
                    });
                }
        })
    });
</script>

jsp代码块：

<form id="tf">
<div>
    <input type="text" id="website-title" name="filename">
    <input type="file" id="id-input-file-2" name="file" />
    <button id="button" type="button">&nbsp;保存</button>
</div>
</form>