关闭

js实现带上传进度的文件上传

时间: 2019-01-14阅读: 1022标签: 文件

代码如下:

//获取文件筐的文件集合
var files = document.getElementById("file1").files;
//创建FormData对象  相当于参数集合  存储方式是键值对
var formData = new FormData();
//添加第一个文件到FormData
formData.append("file", files[0]);
//添加普通数据  后台直接参数接受
formData.append("name", "KevinBlandy");
//创建异步对象
var xhr = new XMLHttpRequest();
//打开连接
xhr.open('POST', '/Home/UpFile', true);
//监听上传事件
if (xhr.upload) {
        //监听上传属性的上传事件,每次上传事件都会执行 progressHandlingFunction
        xhr.upload.addEventListener('progress', progressHandlingFunction, false);
        //xhr.upload.progress = function(){}            也可以
}
//执行上传
xhr.send(formData);

//上传监听 回调
function progressHandlingFunction(event) {
        event.total;        //获取上传文件的总大小
        event.loaded;        //获取已经上传的文件大小
        //获取进度的百分比值
        let percent = (event.loaded / event.total) * 100;
           
        //四舍五入保留0位小数
        percent = percent.toFixed(0);
        
        var jd = document.getElementById("jd");
        jd.value = percent;
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1820

关闭

微信小程序实现pdf,word等格式文件上传

目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等.获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传.

Webpack require.context() 前端工程化之动态导入文件

webpack作为前端构建的打包工具, 把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用,它已经做了非常好了,它还有非常多的功能等待我们去发掘,研究。

vue引入静态js文件

由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。

关于文件上传下载那些事

最传统的文件上传方法是使用form表单上传文件的,只需要把enctype设置为 multipart/form-data。这种方式上传文件不需要 js ,而且没有兼容问题,所有浏览器都支持,就是体验很差,导致页面刷新,页面其他数据丢失

Linux上传文件的几种方式

在使用Linux系统服务器时,我们经常使用命令来上传文件到远程服务器的指定地址。虽然目前有很多流行的工具,比如XShell、XFTP、WinSCP、CRT等等,可是实际中,我们并不是经常使用工具来上传。主要是实际处理文件时

使用HttpClient发送文件流到服务器端

适用场景: 网络绝对路径的URL文件或图片,不存储到本地,转换成stream,直接使用HTTPClient传送到SpringBoot的服务端,将文件存储下来,并返回一个文件地址。目前分层架构的系统越来越多这种需求,所以记录下来以备不时之需。

Nodejs模块fs文件系统操作

node 的fs文档密密麻麻的 api 非常多,毕竟全面支持对文件系统的操作。文档组织的很好,操作基本分为文件操作、目录操作、文件信息、流这个大方面,编程方式也支持同步、异步和 Promise

用node.js读写文件

node.js没有二进制数据类型,却提供了类似字节数组的“流“数据类型,着一种数据类型在文件系统模块中频频出现;把文件内容读入缓冲区,并把缓冲区内容解读为utf8模式,(16进制也可以哦)

HTTP实现xls导出和上传文件处理

需求:导出节目单[不保存文件到本地],输出不同的文件类型[csv,xls,xlsx],上传[csv,xls,xlsx]导入节目单

lock文件_我们为什么需要 lock 文件

从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!