js发送form表单文件加参数

一、前言

form表单可以直接进行提交，但是因为submit之后，会进行页面跳转，导致用户体验感极差，所以为了解决form表单提交出现的问题
使用jquery进行解决

<form target="_blank" id="commit_form" action="/hjmos-ssh/deploy/uoloadFile" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    用户id:<input id="userid" name="userid" type="text" value="1" style="width: 40px"/>
    <p>事件id: <input type="text" id="eventId" name="eventId" /></p>
    <p>事件名称: <input type="text" id="eventName" name="eventName" /></p>
    <input type="submit" value="Submit" />
</form>

二、使用js

完整代码

<form target="_blank" id="commit_form" onsubmit="return false" action="#" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="uploadFile">
    <p>事件id: <input type="text" id="eventId" name="eventId"/></p>
    <p>事件名称: <input type="text" id="eventName" name="eventName" value="事件"/></p>
    <button type="button" id="commit_btn">提交</button>
</form>

    $("#commit_btn").click(function () {
        var fileUpLoad = $("#uploadFile").get(0);
        var files = fileUpLoad.files;
        var data = new FormData();
        for (var i = 0; i < files.length; i++) {
            data.append('file', files[i]);
        }
        $.ajax({
            type:"POST",
            contentType: false,
            url:"/deploy/uoloadFile?userid="+$("#userid").val()+"&eventId="+$("#eventId").val()+"&eventName="+$("#eventName").val(),
            processData: false,
            data:data,
            success:function (data) {
                console.log(data);
                console.log("发送成功！");
            },
            error:function (data) {
                console.log("发生错误了！");
            }
        });
    })