搜索到
16
篇与
的结果
-
AJAX 提交表单混合文件 今天做一个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> <small class="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); //得到页面所有表单数据,Array转Object var AllInputData = $("#formData").serializeArray(); AllInputData.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); } }) }) }) 注意:如果JQury出现Illegal invocation异常是因为没有取消表单处理,ajax里面添加processData: false属性就OK了 后台接收部分 包含的文件用 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; } -
拦截器配置 顺序一定不能错 <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/user/**"/>//拦截/user下的所有方法 <mvc:exclude-mapping path="/user/login"/>//可以选择不拦截登录和添加以及其他的方法，根据情况自己定 <mvc:exclude-mapping path="/user/add"/> <bean class="com.tcc.interceptor.interceptor"></bean> </mvc:interceptor> </mvc:interceptors>
-
-
-
