ajaxfileupload.js 兼容性问题

原创 2015年07月07日 09:53:27

问题1:ajaxfileupload返回json带<pre>

问题描述:

文件正常提交,后台接收正常,action中返回json正常,用火狐查看,响应的值也是正常的

但是,ajax调用js中,就是不走success的方法。

经过调查,是因为返回的json中,带有<pre>标签。

解决方法:

ajaxfileupload.js文件,uploadHttpData中

eval( “data = ” + data );变为data = jQuery.parseJSON(jQuery(data).text());

问题2:IE、Chrome文本选择框的值就丢失问题

问题描述:
前台选择图片后,onchange事件调用ajaxfileupload方法然后在后台进行图片校验,但调用完后文本选择框的值就丢失了,如果不调用ajaxfileupload的话,文本选择框就会显示图片的路径(IE、Chrome有这个问题,但火狐是没问题的)
这里写图片描述
解决方法:
由于安全考虑,在IE和chrome下 ,jquery的clone并不能克隆input field的值,所以就导致克隆后新的input丢失了原来的值。
在jQuery(form).submit(); 后面加上这四句,原理是提交后把元素再复制回来

     var oldElement = jQuery('#jUploadFile' +id ,form);
     var newElement =  jQuery('#'+s.fileElementId );
     jQuery(newElement).replaceWith(oldElement);
     jQuery(oldElement).attr('id', s.fileElementId ); 

这里写图片描述

问题3:ie 返回json弹出下载框问题

问题描述:
js 配合java springMVC后台,成功后返回消息,chrom ff都正常,只有IE提交后返回的JSON弹出下载框

解决方法:
查看类型application/json google后发现原来是IE不支持该标识,所以一律作为文件下载
网上一般有三种方法:

  • 一是手工指定response

  • 二是修改配置文件(但本人一直为试验成功)

  • 三是不再用 @ResponseBody,改用ResponseEntity
    这种方法成功率最高,但是修改起来比较麻烦,如果你有很多地方已经用了@ResponseBody的话
    本实例也采用第三种方法,修改后代码如下

@RequestMapping("/security/uploadPic")
    public ResponseEntity<Map<String, String>>  uploadPic(HttpServletRequest request,HttpServletResponse response) throws Exception {
        // 设置响应类型为json并设置响应编码为utf-8
        String itemId = request.getParameter("itemId");
        Map<String, String> retMap = null ;
        String result = "success"; //文件上传结果反馈
        retMap = fileUpload(request,itemId);
        if(StringUtils.isNotEmpty(retMap.get("reason"))){
            result = "failure";
        }
        retMap.put("result", result);
        logger.info("uploadPic:" + retMap);

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.TEXT_PLAIN);

        return new ResponseEntity<Map<String, String>>(retMap, headers, HttpStatus.OK);
    } 

以上是使用ajaxfileupload.js时遇到的问题,记录一下,希望有其他问题的可以和我联系加上新的问题和解决方法,持续更新中…
参考文档如下:
http://blog.csdn.net/ye1992/article/details/21178579
http://bbs.csdn.net/topics/390910571
http://www.bubuko.com/infodetail-374296.html

版权声明:本文为博主原创文章,未经博主允许不得转载。

附件上传(包含重命名文件名)

SpringMVC+Extjs+Swfupload附件上传 (包含重命名文件名)
  • lethe0624
  • lethe0624
  • 2016年08月10日 17:50
  • 336

解决 IE下ajaxfileupload不兼容的问题

ajaxfileupload文件上传兼容ie浏览器
  • messicr7
  • messicr7
  • 2017年06月02日 09:45
  • 4527

ajaxfileUpload.js兼容ie7、8、9、10、11、firefox、chrome等浏览器的js代码

ajaxfileUpload.js兼容ie7、8、9、10、11、firefox、chrome等浏览器的js代码   因为项目需要,引入了ajaxfileUpload.js的js插件...
  • wangcomputer2010
  • wangcomputer2010
  • 2016年08月03日 12:13
  • 3740

ajaxfileupload.js 兼容ie

  • 2015年12月14日 13:17
  • 8KB
  • 下载

ajaxfileupload.js不支持IE9,IE10的解决方案

ajaxfileupload.js不支持IE9,IE10的解决方案
  • hiping_cao
  • hiping_cao
  • 2014年04月25日 10:11
  • 5005

ajaxfileupload上传文件跨域实战解决

前言: ajaxfileupload跨域文件上传会遇到2个问题 1:跨域访问以json,xml格式返回,直接报406 网上查了设置服务器端直接设置header内容 Access-Control-A...
  • u012927379
  • u012927379
  • 2016年04月27日 11:00
  • 13280

ajaxfileupload.js遇见的一些兼容性问题

项目中有个图片上传的功能,用异步来做。然后返回给页面图片上传后的地址,用标签再引用出来。整个过程为异步。但文件上传没有异步这一说的,ajaxfileupload.js的原理就是: 1:构建一个表单 2...
  • pretendcool
  • pretendcool
  • 2014年04月03日 10:33
  • 2941

ajaxfileupload.js目前功能最全版本(多文件、异常处理等),顺便解决只能上传一次的BUG(非live绑定)

前言之前项目中要进行文件的ajax上传时习惯性的用ajaxfileupload.js这个插件,当时遇到一个问题,使用on绑定change事件后,上传一次后,再次上传时就不再激发change事件了,当时...
  • lhtzbj12
  • lhtzbj12
  • 2017年07月30日 22:07
  • 1638

使用ajaxfileupload.js进行文件上传,文件可以上传成功,但是不走success回调函数解决办法。

后台使用springmvc接收文件上传规定格式为json经过测试可以成功上传,但是AJAX的回调函数success中始终无法获取到data值,原因是根本没走这个方法,到ajaxfileupload.j...
  • qq_32588349
  • qq_32588349
  • 2016年07月28日 16:05
  • 12053

兼容ie8,9,10能够正确返回json结果的ajaxfileupload.js

  • 2015年05月11日 09:26
  • 9KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajaxfileupload.js 兼容性问题
举报原因:
原因补充:

(最多只允许输入30个字)