angularjs使用$http post上传文件的时候,怎样获取文件上传的进度

JavaScript033

angularjs使用$http post上传文件的时候,怎样获取文件上传的进度,第1张

angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法,所以可以直接这样写:

$http({

method: 'POST',

url: url,

eventHandlers: {

progress: function(c) {

console.log('Progress ->' + c)

console.log(c)

}

},

uploadEventHandlers: {

progress: function(e) {

console.log('UploadProgress ->' + e)

console.log(e)

}

},

data: uploadData,

}).success(function(data) {

console.log(data)

}).error(function(data, status) {

console.log(data)

})

最后,也可以用比较成熟的组件去解决,推荐angular-file-upload

HTTP本身无法实现上传进度条,因为无法使用JS访问文件系统,并对文件流进行分块。

可以考虑2种方式实现上传进度条:

1.flash:flash可以访问文件系统,并以二进制方式上传文件,这可以将文件进行分块

2.使用ActiveX控件:这个比较复杂一点,能够监控到每一个字节的进度,可以自己开发或使用第三方库。一般来说,对于前台类型的页面,出于安全和可用性不建议使用ActiveX控件,