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")@ResponseBodypublic 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);// 设置响应数据的类型jsonresponse.setContentType("application/json; charset=utf-8");// 写回response.getWriter().write(json.toString());} catch (Exception e) {throw new RuntimeException("服务器繁忙，上传图片失败");}return json;}

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

js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
form表单重复提交
现象: 后台完成数据库操作后返回到页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交原因: 第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其它页面才消失,在自 ...
.form文件_含文件上传的form表单AJAX提交小结
最近在学习PHP时,遇到不知道如何含文件上传的form表单AJAX提交,现在把这些记录下来以备自己后续复习时用: HTML代码 *姓名: *性别: {eq name='list.sex' value= ...
防止Form表单重复提交的客户端及服务器端的方式
参考:https://www.cnblogs.com/xdp-gacl/p/3859416.html 上文只是介绍了form表单提交,没有介绍form表单异步提交上文只是介绍了单个Servlet的处 ...
vue的form表单在提交成功后置空
vue的form表单在提交成功后置空 form表单说明 :form表单加上属性值 ref="form" 点击事件加入 roleManager.$refs['form'].rese ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
layui form表单ajax提交
<form class="layui-form" method="post" action=""><div class=& ...

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

方法一：使用ajax异步提交

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

java统一处理代码：

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

最新文章

热门文章