ajax上传文件及进度显示
Posted 张啊咩
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax上传文件及进度显示相关的知识,希望对你有一定的参考价值。
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点)。
那么具体怎么样实现ajax上传文件呢?
一般来说,浏览器获取文件的方法有拖拽和input_file两种:
// 先定义一个放文件的数组 var files = []; //拖拽事件获取文件 div.addEventListener(\'drop\',function(ev){ //因为dataTransfer.files只是类数组,所以要用Array.from转换一下 files = files.concat(Array.from(ev.dataTransfer.files)); },false) // 从input_file获取files,假设有n个name为f1的input_file元素 let input_files = Array.from(document.getElementsByName(\'f1\')); uploadBtn.onclick = function(){ input_files.forEach(input=>{ files = files.concat(Array.from(input.files)); }) let formData = new FormData(); files.forEach(file=>{ formData.append(\'name~~\',file); }) let xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(ev){ console.log(\'进度:\'+(100*ev.loaded/ev.total).toFixed(2)+\'%\'); } xhr.open(\'POST\',\'url~~\',true); xhr.send(formData); xhr.onreadystatechange = function(){ if(this.readyState == 4){ if(this.status==200){ alert(\'上传成功~~\'); files = []; } } } }
ps:进度的显示那里,博主之前一直写错为xhr.onprogress,如果写成这样,那么进度过程就不会出现,直接让你等待,直到100%才显示
记住上传的时候无论是onprogress、onload还是onerror,都是xhr.upload对象下的事件才会生效,否则就会检测不了上传的过程,特别是xhr.upload.onprogress
以上是关于ajax上传文件及进度显示的主要内容,如果未能解决你的问题,请参考以下文章