关闭

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

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

代码如下:

//获取文件筐的文件集合
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

关闭

分析 gulp 的运作方式

vinyl 是 gulp 所使用的虚拟的文件格式,在它的自述文件是这么说的:“当提到文件时你首先想到的是什么?肯定是路径和内容吧”,它主要记录的信息有:path:文件路径,contents:文件内容

使用HTML5来实现本地文件读取和写入

最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。

源文件是什么?

在开发软件的过程中,我们需要将编写好的代码(Code)保存到一个文件中,这样代码才不会丢失,才能够被编译器找到,才能最终变成可执行文件。这种用来保存代码的文件就叫做源文件(Source File)。

TypeScript声明文件

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。假如我们想使用第三方库 jQuery,一种常见的方式是在 html 中通过 <script> 标签引入 jQuery

php实现rar文件的读取和解压

PHP Rar Archiving 模块 (php_rar) 是一个读取和解压rar文件的模块,但不提供RAR压缩(打包)的功能。首先要到PECL的RAR页面下载DLL. 根据自己的情况选择下载对应版本的DLL.

js下载文件,判断文件是否返回

下载之前用的window.location.href下载的,但是这个判别不了文件是否返回,小文件倒还好,大的文件长时间没有下载也没有加载条什么的,用户有时会点击下载好几下,大的数据很容易将服务拖垮

将数组转化为 csv 文件类型的代码

将一个数组转化为逗号为分割符的字符串(CSV)即表格数据。利用了 Array.prototype.map() 和 Array.prototype.join() 两个函数,实现了一个简单的数组转化为 csv 文件类型的代码。

form表单文件上传_multipart/form-data文件上传

form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式.。application/x-www-form-urlencoded:默认编码方式,multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件,text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。

使用FileSave.js将网页内容保存到文件

在写Chrome extension时候,偶尔需要将网页的内容保存到文件。要实现此功能,正常的流程是创建Blob对象存放内容,创建url,创建一个 a 标签,然后将连接与Blob对象关联并放到 a标签的href或者download(H5)属性中

HTML5中FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。

点击更多...

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