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,根据实际需要修改这里的数值。

ajax上传下载自定义圆形滚动条的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. nodejs+express-实现文件上传下载管理的网站

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  3. JavaWeb 文件上传下载

    1. 文件上传下载概述 1.1. 什么是文件上传下载 所谓文件上传下载就是将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下 ...

  4. 转载:JavaWeb 文件上传下载

    转自:https://www.cnblogs.com/aaron911/p/7797877.html 1. 文件上传下载概述 1.1. 什么是文件上传下载 所谓文件上传下载就是将本地文件上传到服务器端 ...

  5. Django文件上传下载与富文本编辑框

    django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...

  6. 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具

    直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...

  7. 简单Excel表格上传下载,POI

    一.废话 Excel表格是office软件中的一员,几乎是使用次数最多的办公软件.所以在java进行企业级应用开发的时候经常会用到对应的上传下载便利办公. 目前,比较常用的实现Java导入.导出Exc ...

  8. 使用Eclipse上传/下载Git项目

    使用Eclipse上传/下载Git项目 前提: Eclipse已安装EGit插件 已拥有GitLab / GitHub / 其它Git托管服务账号 SSH方式 配置 配置Git信息 配置用户信息 Ec ...

  9. SpringMVC文件上传下载

    在Spring MVC的基础框架搭建起来后,我们测试了spring mvc中的返回值类型,如果你还没有搭建好springmvc的架构请参考博文->http://www.cnblogs.com/q ...

随机推荐

  1. hash 位运算 练习

    hash  位运算 [以下代码仅做位运算的练习,算法本身不合理  php转译python] 从头到尾彻底解析Hash表算法_知识库_博客园 https://kb.cnblogs.com/page/18 ...

  2. windows加固

    1. 账户管理和认证授权 1.1 账户 默认账户安全 禁用Guest账户. 禁用或删除其他无用账户(建议先禁用账户三个月,待确认没有问题后删除.) 操作步骤 打开 控制面板 > 管理工具 > ...

  3. Appium下载安装及环境配置

    下载地址:https://bitbucket.org/appium/appium.app/downloads/ windows安装: 下载 AppiumForWindows.zip 解压 Appium ...

  4. Windows 10 更改系统文字大小

    一. Win + R 进入Regedit: 二. 定位到下图的位置: 三. 选中一个项目,右键,选中修改二进制,打开后如下图: 四. 1.这里,0000一行中的第一位,对应了图形界面设置中的字体大小. ...

  5. windows7,python3使用time.strftime()函数报ValueError: embedded null byte

    windows7环境下,执行代码报ValueError: embedded null byte时,在原代码前面加一行代码:locale.setlocale(locale.LC_ALL,'en')即可解 ...

  6. Java学习-049-正则工具类

    自去年九月份决定再次入学和职业资格进阶,开始备战二者考试至今,以及当下进行中的职称申请,犹如孤独的狼,不断前行在路上,而今凡凡总总的已历8月... 不感慨了,如下为一园友需要的正则工具类,直接上码: ...

  7. 5、 LwIP协议栈规范翻译——操作系统仿真层

    为了使lwIP可移植,操作系统特定的函数调用和数据结构不直接在协议的代码中使用.相反,当需要这样的函数调用和数据结构时,直接使用操作系统仿真层. 操作系统仿真层为操作系统服务提供统一的接口,如定时器, ...

  8. 20190404 Oracle忘记登陆密码

    记忆力不好,总是忘记Oracle账号的登陆密码 修改方式 Windows cmd 登陆修改后的密码即可

  9. what's the 跳空

    出自 MBA智库百科(https://wiki.mbalib.com/) 什么是跳空 跳空在日语中叫“窗口”,英语是“gap”,又称为即价格跳空,是指汇率在快速波动时产生的曲线的最低价与曲线的最高价之 ...

  10. 小程序movable-area置于顶层遮盖下方元素无法操作的解决方案

    小程序项目中有个需求,右下角按钮可以在页面中随意拖动,此时查看文档找到了一个自带的标签可以实现此功能,代码如下 <movable-area> <movable-view x=&quo ...