码迷,mamicode.com
首页 > Web开发 > 详细

ajax上传文件及进度显示

时间:2017-11-27 11:00:05      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:ota   event   dev   文件的   loaded   stat   log   back   alert   

之前在博文:原生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%才显示

记住上传的时候无论是onprogressonload还是onerror,都是xhr.upload对象下的事件才会生效,否则就会检测不了上传的过程,特别是xhr.upload.onprogress

ajax上传文件及进度显示

标签:ota   event   dev   文件的   loaded   stat   log   back   alert   

原文地址:http://www.cnblogs.com/amiezhang/p/7902808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!