form表单下载文件成功返回值得问题

ajaxForm问题集锦,一个神奇的问题:使用ajaxForm提交表单上传文件后服务器端返回json数据IE浏览器无法解析
  •    最近做一个额照片上传后裁剪的功能,用到 jquery form的ajaxform提交图片保存,然后根据返回的JSON字符串直接在页面上显示出上传的照片,并且使用jcrop进行裁剪保存:JS代码如下

  $('#form_portrait').ajaxForm({dataType: 'json', success: function(json) {if(json.img){$('#f_portrait_temp').attr("width",json.width);$('#f_portrait_temp').attr("height",json.height);$('#f_portrait_temp').attr("src","${base}"+json.img + " r="+Math.random());$('#img_imgSrcPath').attr("value",json.img);$('#f_portrait_temp').show();$('#f_portrait_temp').ready(function(){ var api = jQuery.Jcrop('#f_portrait_temp',{ setSelect: [ 20, 20, 128, 155 ], aspectRatio: 4/5, onChange: showCoords, onSelect: showCoords });$('#btn_upload').hide();$('#btn_saves').show();});}else if(json.msg) alert(json.msg); } });

  使用firefox和google 浏览器都很正常,firebug也能看到返回的json和图片裁剪也很正常,但唯独IE浏览器不行,点击上传按钮的时候浏览器直接弹出来下载请求页面,把json数据变成了下载文件,换了很多版本的jquery和form插件都不行。使用ajaxForm提交表单上传文件后服务器端返回json数据IE浏览器无法解析 ,到后来跟踪一个网站同样地功能才找到问题所在,原来使用ajaxForm,必须以html格式返回json数据. 也就是 response.setContentType("text/html; charset=utf-8"); 这样返回的数据才能被设置到回调函数里面. 而且貌似格式必须是 "key":"value" 也就是双引号,单引号还不行,这算不算一个bug呢?明明

  dataType: 'json',

  却要返回html。

  RenderUtils.renderHtml(response, json.toString(), "no-cache:false");

  • 表单中带有 <input type="file" >文件类型的输入框 则使用ajaxForm时会自动将Content-Type设置为文件上传的,这会导致Springmvc框架无法获取到表单数据,正常的接收头 Content-Type application/x-www-form-urlencoded; charset=UTF-8
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现jqueryform提交下载文件,可以采用以下步骤: 1. 在前端页面中添加一个,用于提交下载文件的请求。 2. 使用jqueryform插件将序列化并发送到后台。 3. 后台接收到请求后,根据中的参数生成需要下载文件,并将文件保存到服务器端。 4. 后台将生成的文件路径返回给前端。 5. 前端使用window.open()方法打开返回文件路径即可实现文件下载。 以下是示例代码: 前端代码: ``` <form id="downloadForm" action="/downloadFile" method="post"> <input type="hidden" name="fileName" value="example.txt"> <input type="hidden" name="fileContent" value="This is an example file."> <input type="submit" value="Download"> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script> <script> $(document).ready(function(){ $("#downloadForm").submit(function(e){ e.preventDefault(); $(this).ajaxSubmit({ success: function(data){ window.open(data); } }); }); }); </script> ``` 后台代码: ``` @RequestMapping(value = "/downloadFile", method = RequestMethod.POST) @ResponseBody public String downloadFile(@RequestParam("fileName") String fileName, @RequestParam("fileContent") String fileContent, HttpServletRequest request, HttpServletResponse response) throws Exception { // 生成文件并保存到服务器端 String filePath = "/path/to/file/" + fileName; File file = new File(filePath); FileWriter writer = new FileWriter(file); writer.write(fileContent); writer.flush(); writer.close(); // 返回文件路径 return filePath; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值