利用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。
完美!!!