demo地址:https://pan.baidu.com/s/1qYNYCFE
因为项目需要在上传文件的时候,知道上传的进度,所以封装了一个方法,在上传文件的时候动态显示上传进度,主要根据XMLHttpRequest 的onprogress方法,其中upload.onprogress是上传的时候的回掉,.onprogress是下载的时候的回掉,onprogress回掉对象里面有两个参数:loaded、total,loaded表示当前上传或下载的字节数,total表示预估的总的字节数,我们可以根据这个判断出当前上传或者下载的百分比,进而显示进度,在下载的时候我们需要下载二进制流,通过设置responseType为blob类型,告诉XMLHttpRequest我们需要的是流数据,然后在onload方法里面我们通过var blob = this.response;拿到二进制流,然后通过window.URL.createObjectURL(blob),把流转换成链接地址,拿到这个地址后我们可以赋值给img.src用来显示图片,也可以复制给a标签用来另存为:
注:另存为在IE中因为不可以操作blob对象,所以无法用a标签来触发浏览器的另存为,不过IE有自己的方法:window.navigator.msSaveOrOpenBlob(blob, downloadName);其中blob就是流对象,downloadName是下载时候显示的文件名
注:IE最低兼容到IE10
注:在IIS上传超过30兆的时候,返回404解决方案:在IIS中选中站点后双击“请求筛选”,点击右侧的“编辑功能设置”。在弹出的“编辑请求筛选设置”中,修改“允许的最大内容长度(字节)”,默认为30000000字节,即30M,根据实际需要修改这里的数值。