ajaxfileupload.js 原理、常见错误及注意事项

刚刚接到一个BUG任务,在IE8中使用ajaxfileupload组件无法上传文件到服务器,根据单步调试(IE的单步调试还是比较有用)并分析了ajaxfileupload组件。

问题
组件抛出错误为“拒绝访问”,使用控制台发现数据已经返回,服务器上已经成功上传,但是客户端无法获取到结果,因此提示上传失败。

QQ Photo20150513194835.jpg

使用该组件

下载该组件 点击下载

$.ajaxFileUpload({
    url: 'upload.php', //上传地址,需要注意跨域问题
    secureuri: false,
    data: data,
    fileElementId: 'fileToUpload', //该上传input 的ID
    dataType: 'json',
    success: function (data) {
        alert(data.msg);

    },
    error: function (data) {
        alert("error");
    }
});

ajaxfileupload 主要原理

  1. 创建一个iframe 和 form 然后把需要上传的表单装载
  2. 发起POST请求,然后从IFrame中获取返回来的结果

解决方法
在IE8中获取iframe 得到拒绝访问错误,但是没有发生跨域问题,应该不存在这个问题,跟踪了很久,其中使用HTTP请求的查看工具发现一个问题

其中一个接口响应了如图所示

QQ Photo20150513194835.jpg

HTTP请求返回的content type 字段和期望的不一致,发现并不是text/html,IE8会使用active 控件解析返回来的,但是Js无法和解析的内容通信,造成错误 服务器修复了之后解决了这个问题

修改后的请求

QQ Photo20150513194835.jpg

IE8下使用ajaxfileupload的其他注意事项

  1. 文件控件file input被挡住,IE8会认为不是用户直接点击无法发起form请求
  2. 跨域上传问题,如果跨域了,自然无法上传了,IE8无法访问iframe里面的资源
  3. 设置了document.domain 如果设置了这个,可能造成跨域的问题