Ajax formData上传文件 + 进度条

前端之家收集整理的这篇文章主要介绍了Ajax formData上传文件 + 进度条前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
//
require('./lib/ajax');
require('jquery');
var type=0,//0 dp  1 mt
    localHost = location.host.split('.'),localUrl = location.origin.search(/xxxx/g) > -1 ? '//g.xxxx.com' > -1 : '//g.xxxx.com';
    if(location.origin.match('meituan')) {
      type=1;
    }
$(".file").on('change',function(es){
   $(".pops").removeClass('hide');
   console.log('kaishi');
   var file = $(".file")[0].files[0]; //文件对象
   uploadVideo(file)
})

function uploadVideo(file){
  console.log('show');
  var name = file.name,//文件名
      form = new FormData();
      form.append("file",file);
      if(file.size>10000000){
        alert('请上传低于10兆的视频文件')
        window.location.href='upload.html?t=123'
        return
      }
       var xhr = new XMLHttpRequest();
       xhr.upload.addEventListener("progress",uploadProgress,false);
       xhr.addEventListener("load",uploadComplete,false);
       xhr.addEventListener("error",uploadFailed,false);
       xhr.addEventListener("abort",uploadCanceled,false);
       xhr.open("POST",'//g.xxxx.com/xxxx/xxxx/demo/uploadImage');//修改成自己的接口
       xhr.send(form);
}
function uploadProgress(){
  console.log('progress');
  $(".pops").removeClass('hide');
  $(".pops").show();
}
function uploadComplete(evt){
  var data = evt.target.responseText;
  if(typeof data==="string") {
    data = JSON.parse(data);
  }
  var id = data.data;
  $(".dp").show()
  $(".mt").show()
  $(".pops").addClass('hide');
}
function uploadFailed(){
  console.log('uploadFailed');
}
function uploadCanceled(){
  console.log('uploadCanceled');
}
原文链接:https://www.f2er.com/ajax/160397.html

猜你在找的Ajax相关文章