form表单上传文件

一、formData()直接获取form表单数据

例子：获取form表单的id给formData(),然后传给后台。

要求：

•  传入值的name值必须与后台接受的name相对应。
•  form表单不能嵌套，否则获取不到数值。

html代码：

<form id="wu-form-stuInfo" enctype="multipart/form-data">
    <table>
        <tr>
            <td align="right">姓名:</td>
            <td><input id="stuName" type="text" name="stuName" class="wu-text" placeholder="不能为空" /></td>
        </tr>
        <tr>
            <td align="right">年龄:</td>
            <td><input id="stuAge" type="text" name="stuAge" class="wu-text" placeholder="不能为空，例如：18" /></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td><input id="stuSex" type="text" name="stuSex" class="wu-text" placeholder="不能为空，例如：女" /></td>
        </tr>
        <tr>
            <td width="60" align="right">图片上传:</td>
            <td>
                <input class="fl" type="file" id="imgPath" name="file" onchange="javascript:setImagePreview();" />
            </td>
        </tr>
        <tr>
            <td valign="top" align="right">介绍:</td>
            <td><textarea id="stuIntroduce" name="stuIntroduce" rows="6" class="wu-textarea" style="260px" placeholder="不能为空，字数为200字以内。" required="true" maxlength="200"></textarea></td>
        </tr>
    </table>
</form>

js代码：

var obj = document.getElementById("wu-form-stuInfo");//获取id为wu-form-stuInfo的对象
// var obj = document.forms.namedItem("wu-form-stuInfo");//获取表单集合中id为wu-form-stuInfo的form表单
// var obj = document.forms[0];//获取表单集合中的第一个form表单
var formData = new FormData(obj);
formData.append("id",id);//添加学生的id

后台代码：

根据传入字段，可以用相同的字段名接收，也可以用符合的实体类接收，注：文件接收格式为MultipartFile。

二、向formData()添加数据

例子：获取传入数据的值给formData(),然后传给后台。

要求：

•  传入值的name值必须与后台接受的name相对应。

html代码：

        同上

js代码：

var file = $("#imgPath")[0].files[0];//获取文件

var formData = new FormData();
formData.append("file", file);
formData.append("id",id);//添加学生的id
formData.append("stuName", $("#stuName").val());
formData.append("stuAge", $("#stuAge").val());
formData.append("stuSex", $("#stuSex").val());
formData.append("stuIntroduce", $("#stuIntroduce").val());