前端插件jquery.form.js上传文件(IE8回调失效)

最新推荐文章于 2022-01-20 11:18:33 发布

代码玩家

最新推荐文章于 2022-01-20 11:18:33 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA 前端

本文链接：https://blog.youkuaiyun.com/qq_33172029/article/details/84259545

前端同时被 2 个专栏收录

53 篇文章

订阅专栏

JAVA

33 篇文章

订阅专栏

本文探讨了在IE8中使用jQuery.form插件进行文件上传时，回调函数无法正常触发的问题。通过对比两种不同的后端处理方式，发现直接使用HttpServletResponse输出JSON可以解决IE8的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况：在前端上传文件后，希望通过返回结果，调用回调函数，有可能这样的问题，本来就存在

前端：（注意版本问题，很大几率不兼容，我试过了...）

jquery：1.8.3

jquery.form.js:：3.51.0

代码：

var option = {
    url : url ,
    type : 'POST',
    dataType : 'json',
    //headers : {"ClientCallMode" : "ajax"}, //添加请求头部
    success : function(data) {
    
    },
    error: function(data) {

    }
};
$("#form").ajaxSubmit(option);

后台：（springmvc3.1)

代码1：（失败）


    //produces = "text/plain"无效
	//@RequestMapping(value = "commonUpFileCode", produces = "text/plain")
    @RequestMapping(value = "commonUpFileCode")
	@ResponseBody
	public Map<String,Object> commonUpFileCode(HttpServletRequest request,Model model){
		log.info("Enter OrderMeetController,execute commonUpFileCode() method..");
		Map<String,Object> result = new HashMap<String, Object>();
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
		List<MultipartFile> files = multipartRequest.getFiles("myFile");//上传项，myFile为前端上传input的name属性名称
		result.put("result", "ok");
		return result;
	}

效果：

在谷歌浏览器，前端的success回调函数，生效，而IE8不能；

代码2：（成功）

	@RequestMapping(value = "commonUpFileCode")
	public void commonUpFileCode(HttpServletRequest request,HttpServletResponse response, Model model){
		Map<String,Object> result = new HashMap<String, Object>();
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
		List<MultipartFile> files = multipartRequest.getFiles("myFile");//上传项
		net.sf.json.JSONObject json = net.sf.json.JSONObject.fromMap(result);
        //用最底层的相应对象输出，一点问题都没有
		response.setContentType("text/html");
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		out.write(json.toString());
	}

效果：

在IE8和谷歌浏览器，前端的success回调函数，都能生效。

文章参考：

ajax提交表单、ajax实现文件上传

jQuery.form插件在win7下的ie8不执行回调函数

使用ajax提交form表单，包括ajax文件上传

ie8兼容性问题(八) jquery——ajaxSubmit

jQuery ajax form提交在IE8下不执行回调函数