今日份 Ajax提交Form表单（含表单文件上传）

今日份 难题 放送

Ajax 提交 form 表单（含文件上传）

今日份 难题 原因

在项目开发中，遇到上传文件并需要返回状态信息判断执行后续操作 ...

所以在这里采用了 Ajax进行表单提交

今日份 难题 解决

代码如下：

HTML 代码：

<form id="uploadForm" action="${pageContext.request.contextPath}/upload/uploadFile"
            enctype="multipart/form-data" method="POST">
            <input id="file" name="file" type="file" style="width:300px" />
</form>

JS 代码：

var uploadStatus;// true：上传成功/false：上传失败

// 验证文件格式
    $("#file").change(function() {
        var index = $("#file").val().lastIndexOf("\.");
        var suffixText = $("#file").val().substring(index + 1, $("#file").val().length).toLowerCase()
        if (suffixText == "json") {
            readData();// 调用提交表单
        }
    })

 

// 提交表单
    function readData() {
        var data = new FormData($("#uploadForm")[0])
        $.ajax({
            type : "POST",
            enctype : 'multipart/form-data',
            async : false,// （同步）
            url : "${pageContext.request.contextPath}/upload/uploadFile",
            data : data,
            processData : false,
            contentType : false,
            cache : false,
            timeout : 600000,
            success : function(result) {
                uploadStatus = result;
            }
        })
        return uploadStatus;
    }

 

以上

 

注意：enctype : 'multipart/form-data'