form表单同时提交带文本和图片的数据

方法一：使用ajax异步提交

此种方法的好处是可以回调响应结果。

html代码：

<form action="${basePath}/save" method="post" name="form" id="formId">
    <table>
        <tr>
            <td>名称：</td>
            <td><input type="text" id="title" name="entity.title" class="input"></td>
        </tr>
        <tr>
            <td>图片：</td>
            <td>
                <input type="file" id="uploadImage" name="uploadImage"
                       accept="image/gif,image/png,image/jpeg,image/bmp"/>

                <input type="hidden" id="imgUrl" name="entity.imgUrl"
                       value="<s:property value='entity.imgUrl'/>">

                <span>提示：文件大小不超过200k，建议图片宽高为300px*300px</span>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" onclick="doSubmit()" value="提交"/>
                <input type="reset" value="取消">
            </td>
        </tr>
    </table>
</form>
           

使用的是ajax异步单独处理并提交，此处form表单的enctype="multipart/form-data"属性可以不添加。

js处理代码：

function doSummit(){
var formData=new FormData($("#formId")[0]);
$.ajax({
    url:url,
    type: 'post',
    cache: false, //上传文件不需要缓存
    async : true,
    data: formdata,
    processData: false, // 此处是关键：告诉jQuery不要去处理发送的数据
    contentType: false, // 此处是关键：告诉jQuery不要去设置Content-Type请求头
    success: function (data) {
                //处理成功后动作，比如调转window.location.href ='/list'
            },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
              alert(errorThrown);
            }
    }); 
}
           

此处contentType和processDate属性必须添加，否则后台无法接收。

方法二：使用form表单自带的submit功能直接提交

html代码：

<form action="${basePath}/save" method="post" name="form" id="form      enctype="multipart/form-data">
    <table>
        <tr>
            <td>名称：</td>
            <td><input type="text" id="title" name="entity.title" class="input"></td>
        </tr>
        <tr>
            <td>图片：</td>
            <td>
                <input type="file" id="uploadImage" name="uploadImage"
                       accept="image/gif,image/png,image/jpeg,image/bmp"/>

                <input type="hidden" id="imgUrl" name="entity.imgUrl"
                       value="<s:property value='entity.imgUrl'/>">

                <span>提示：文件大小不超过200k，建议图片宽高为300px*300px</span>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="提交"/>
                <input type="reset" value="取消">
            </td>
        </tr>
    </table>
</form>
           

点击提交按钮，触发form表单的提交操作，直接将数据提交到后台，此处必须配置enctype="multipart/form-data"。

java统一处理代码：

仅供参考，具体实现需结合自身业务。

@RequestMapping("/save")
    @ResponseBody
    public JSONObject Edit(HttpServletRequest request, 
                           HttpServletResponse response,
                           @RequestParam(value = "file", required = false) MultipartFile file) {
        JSONObject json = new JSONObject();
        try {
            // 获取图片原始文件名
            String originalFilename = file.getOriginalFilename();

            // 文件名使用当前时间
            String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());

            // 获取上传图片的扩展名(jpg/png/...)
            String extension = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();

            // 图片上传的相对路径（因为相对路径放到页面上就可以显示图片）
            String path = "/upload/" + name + "." + extension;

            // 图片上传的绝对路径
            String url = request.getSession().getServletContext().getRealPath("") + path;

            File dir = new File(url);
            if (!dir.exists()) {
                dir.mkdirs();
            }

            // 将图片上传到本地
            file.transferTo(new File(url));

            // 将相对路径写回（json格式）
            json.put("path", path);

            // 设置响应数据的类型json
            response.setContentType("application/json; charset=utf-8");
            // 写回
            response.getWriter().write(json.toString());

        } catch (Exception e) {
            throw new RuntimeException("服务器繁忙，上传图片失败");
        }

        return json;
    }