文件上传,利用XMLHttpRequest来实现 ---进度条

    科技2024-11-19  4

    利用XMLHttpRequest完成文件上传功能

    新手上路,记录篇

    上传文件: POST方式 文件上传,利用XMLHttpRequest实现 *页面的UI结构: * **JavaScript部分: ** 目前来说。基本功能已经实现,但是为了页面更加美观,关于文件上传看起来更加直观,在页面利用bootstrap搭建一个进度条。 其UI结构: 关于进度条的计算 onprogress —— 监听文件上传的进度 e.loaded —— 已传输的字节 e.total —— 需传输的总字节 e.lengthComputable —— 文件大小是否可计算 算法: (e.loaded / e.total ) * 100 按照百分比来计算刚好也可以用,

    具体代码如下

    至此,文件上传功能已经实现,且是基于XMLHttpRequest来实现的,效果图如下:

    当然,此篇文章中用到了bootstrap以及jQuery,就肯定少不了bootstrap.css和JQuery.js。

    完美!!!
    Processed: 0.023, SQL: 8