ajax上传下载自定义圆形滚动条
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上传下载自定义圆形滚动条的更多相关文章
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- nodejs+express-实现文件上传下载管理的网站
Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...
- JavaWeb 文件上传下载
1. 文件上传下载概述 1.1. 什么是文件上传下载 所谓文件上传下载就是将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下 ...
- 转载:JavaWeb 文件上传下载
转自:https://www.cnblogs.com/aaron911/p/7797877.html 1. 文件上传下载概述 1.1. 什么是文件上传下载 所谓文件上传下载就是将本地文件上传到服务器端 ...
- Django文件上传下载与富文本编辑框
django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...
- 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具
直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...
- 简单Excel表格上传下载,POI
一.废话 Excel表格是office软件中的一员,几乎是使用次数最多的办公软件.所以在java进行企业级应用开发的时候经常会用到对应的上传下载便利办公. 目前,比较常用的实现Java导入.导出Exc ...
- 使用Eclipse上传/下载Git项目
使用Eclipse上传/下载Git项目 前提: Eclipse已安装EGit插件 已拥有GitLab / GitHub / 其它Git托管服务账号 SSH方式 配置 配置Git信息 配置用户信息 Ec ...
- SpringMVC文件上传下载
在Spring MVC的基础框架搭建起来后,我们测试了spring mvc中的返回值类型,如果你还没有搭建好springmvc的架构请参考博文->http://www.cnblogs.com/q ...
随机推荐
- 【JVM】-NO.111.JVM.1 -【JDK11 HashMap详解-1-hash()剖析】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...
- Java文件写入与读取实例求最大子数组
出现bug的点:输入数组无限大: 输入的整数,量大: 解决方案:向文件中输入随机数组,大小范围与量都可以控制. 源代码: import java.io.BufferedReader; import j ...
- 强迫症犯了,忍不住赞一下slf4j包Logger.java的优雅代码
如下是slf4j-api包下的Logger接口类里其中几个方法的声明: package org.slf4j; public interface Logger { /** * Log a message ...
- Vue系列之 => Watch监视路由地址改变
第一种方式实现监听 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- mysql 事务锁超时时间 innodb_lock_wait_timeout
mysql 事务锁超时时间 innodb_lock_wait_timeout: # 查询全局等待事务锁超时时间 SHOW GLOBAL VARIABLES LIKE 'innodb_lock_wait ...
- Django之CBV源码解析
l链接跳转:https://www.cnblogs.com/hnlmy/p/9662798.html 以及https://www.cnblogs.com/hnlmy/p/10603999.html
- [antd-design-pro] mock 数据(post,request不一致)Sorry, we need js to run correctly!
Sorry, we need js to run correctly! 可能问题: mock数据 api 和 request api 不一致 'POST /api/banners/left' ...
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- Javascript 面向对象编程2:构造函数的继承
这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例.对象之间的"继承"的五种方法.比如,现在有一个"动物"对象 ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...