ajax同时提交文件和内容

##JSON 提交表单数据混合文件/后台SSM
今天做一个SSM框架项目的时候碰到一个问题,ajax表单混合文件提交如何实现,整半天终于弄出来了

HTML部分

<form id="formData"><div class="form-row"><div class="form-group col-md-6"><label>商品名称</label><input type="text" name="name" class="form-control"></div><div class="form-group col-md-6"><label>商品外部编号</label><input type="number" name="externalId" class="form-control"></div></div><div class="form-row"><div class="form-group col-md-6"><label>所属分类</label><select name="categoryId" class="custom-select"><c:forEach var="items" items="${categories}"><option value="${items.id}">${items.name}</option></c:forEach></select></div><div class="form-group col-md-6"><label>市场价格</label><input type="text" name="price" class="form-control"></div></div><div class="form-row"><div class="form-group col-md-6"><label>店内价格</label><input name="shopPrice" type="text" class="form-control"></div><div class="form-group col-md-6"><label>商品库存</label><input type="number" name="quantity" class="form-control"></div></div><div class="form-row"><div class="form-group col-md-6"><label>是否记录库存</label><div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inventoryFlag"id="quantityyes" value="0" checked><label class="form-check-label" for="quantityyes">是</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inventoryFlag"id="quantityno" value="1"><label class="form-check-label" for="quantityno">否</label></div></div></div><div class="form-group col-md-6"><label>是否热销</label><div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="hot" id="hotno"value="1"><label class="form-check-label" for="hotno">非热门商品</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="hot" id="hotyes"value="0" checked><label class="form-check-label" for="hotyes">热门商品</label></div></div></div></div><div class="form-row"><div class="form-group col-md-6"><label>状态</label><select name="productStatus" class="custom-select"><option selected value="0">上架</option><option value="1">下架</option></select></div><div class="form-group col-md-6"><label>商品概要说明</label><input type="text" name="generalExplain" class="form-control"></div></div><div class="form-row"><div class="form-group col-md-6"><label>上传图片</label><div class="custom-file"><input type="file" name="file" class="custom-file-input" id="imagefile"><label class="custom-file-label" for="inputGroupFile03">上传图片</label><smallclass="form-text text-muted">上传图片的最佳尺寸：300像素*300像素，其他尺寸会影响页面效果，格式png，jpeg，jpg，gif。大小不超过1M</small></div></div></div><div class="form-row"><div><button type="button" style="margin-right:10px" id="save"class="btn btn-success">保存</button></div><div><button type="button" class="btn btn-success">返回</button></div></div></form>

JS部分

           $(function () {//提交    $("#save").click(function () {//创建表单数据容器var formData = new FormData()//获取文件数据file = $('#imagefile')[0].files[0];//检查文件上传if (!file) {alert('请先上传文件');return;}//添加表单数据formData.append('file', file);//得到页面所有表单数据的序列化var AllInputData = $("#formData").serializeArray();//Array转ObjectAllInputData.forEach(function (e) {formData.append(e['name'], e['value']);});//发送请求$.ajax({url: 'addProduct?${_csrf.parameterName}=${_csrf.token}',type: 'post',data: formData,contentType: false,processData: false,success: function (resp) {console.log(resp);}})})})

注意:如果JQuery出现Illegal invocation异常是因为没有取消表单处理,ajax里面添加processData: false属性就OK了

SSM后台接收部分

包含文件用 MultipartFile接收并且必须加上@RequestParam注解,不然不能正常接收！

 /*** 添加商品*/@RequestMapping(value="addProduct",method=RequestMethod.POST)//Product是我自己定义的一个包装类,public String addProduct(Product product,@RequestParam("file")MultipartFile  file){System.out.println(product.getName());System.out.println(file.getOriginalFilename());return null;}

ajax同时提交文件和内容相关推荐

ajax如何提交文件类型,在tpl文件中的文件类型的提交Ajax形式
我有应用程序在codeigniter smarty模板.我要提交与阿贾克斯的表单提交功能,但输入类型是图片上传文件,我使用serialize()为,但它不能使我的数据...在tpl文件中的文件类型的提 ...
Form表单提交文件和参数
form表单同时提交文件和参数 1.说明项目中使用form表单配合ajax同时提交文件和其他的参数,具体实现请看代码 2.前端代码 1.form表单部分前台提交的是方式是form表单方式,提交内容 ...
ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
ajax js引用,ajax 引用js文件内容
ajax 引用js文件内容内容精选换一换 ConfigMap是一种用于存储应用所需配置信息的资源类型,用于保存配置数据的键值对,可以用来保存单个属性,也可以用来保存配置文件.通过ConfigMap ...
.NET Core Web API使用HttpClient提交文件的二进制流（multipart/form-data内容类型）
需求背景: 拼多多优惠券 m.fenfaw.net 在需要通过服务端请求传递文件二进制文件流数据到相关的服务端保存时,如对接第三方接口很多情况下都会提供一个上传文件的接口,但是当你直接通过前端Ajax ...
jquery的ajax提交文件上传
以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...
将form表单提交文件修改为ajax提交
好久没有记录工作中的出现的问题了,不过最近客户提出了新的需求,正好弥补了一下我的短板,学到了新的知识. 周一接到客户电话,要求完善上周写的某个功能--就是同时上传多个图片,并通过接口程序传到第三方系统 ...
html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...
每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐.XMLHttpRequest Level 2 添加了一个新的接口-- ...
移动端通过ajax上传图片（文件）并在前台展示——通过H5的FormData对象
前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...

ajax同时提交文件和内容

HTML部分

JS部分

SSM后台接收部分

ajax同时提交文件和内容相关推荐

最新文章

热门文章