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="width: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());