js HTML5 Ajax实现文件上传进度条功能

网络编程 2025/10/29 佚名

3 2 1

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能，分享给大家供大家参考，具体内容如下

1. lib.js

var Host = window.location.host;
//--Cookie
function setCookie(name,value)
{
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + '='+ escape (value) + ';expires=' + exp.toGMTString();
}
function getCookie(name)
{
  var arr,reg=new RegExp('(^| )'+name+'=([^;]*)(;|$)');
  if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return null;
}
//--Dom & String
var get = {
   //-- 获得Dom Id
   Id:function(obj)
   {
     return is.object(obj) "total", shardCount); //总片数
          formData.append("index", i + 1);    //当前是第几片
          post.upload.addEventListener('progress', callback, false);
          post.open('post', json.url, true); // 异步传输
          post.send(formData);
          post.upload.onprogress = function (ev) {
           if(file.getProgress(ev) == 100) {
              json.success(ev);
           }
          }
        }
      }else {
        var formData = new FormData();
        formData.append(json.file, FLIE.id.files[0]);
        if (json.progress) {
          post.upload.addEventListener('progress', json.progress, false);
        }
        post.open('post', json.url, true); // 异步传输
        post.send(formData);
        /*post.upload.onprogress = function (ev) {
         if(file.getProgress(ev) == 100) {
            json.success(ev);
         }
        }*/
        post.onreadystatechange = function () {
          switch (post.readyState) {
            case 1:{break;}
            case 2:{break;}
            case 3:{break;}
            case 4:{
              if (post.status == 200 || post.status == 0) { 
               json.success(string.toJson(post.responseText));
              }
              break;
            }
          }
        }
      }
    }
     
  },
  //-- 获得上传文件的进度值
  getProgress:function (evt) {
    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
    return percentComplete.toString();
  },
  //-- 获得文件的大小
  getSize:function (file) {
    var FILE = get.Id(file).files[0];
    var fileSize = 0;
     
    if (file.size > 1024 * 1024) {
      fileSize = (Math.round(FILE.size * 100 / (1024 * 1024)) / 100).toString();
    } else {
      fileSize = (Math.round(FILE.size * 100 / 1024) / 100).toString();
    }
    return fileSize;
  },
  //-- 获得文件的类型
  getType:function (file) {
    var FILE = get.Id(file).files[0];
    return FILE.type;
  },
  //-- 获得文件的名字
  getName:function (file) {
    var FILE = get.Id(file).files[0];
    return FILE.name;
  },
  //--包含文件
  include:function (path) {
     
  }
}
//--Ajax数据提交类
var Call = {
    /**
     * 参数为json对象|Json字符串， 
     * @type post|get 默认为get ，请求方式
     * @url String 字符串型 ,请求地址
     * @loading bool true|false 是否开启动画
     * @time int 动画时间 如果 loading 为false 则不用设置这个参数
     * @data Json | String 提交的数据
     * @sucess 回调函数 这个必须有  
     */
    Ajax:function(json){
      var json = is.object(json)" var output='';";
  /****
   * 0101010---0为text[]元素,1为js[]元素
   * 重新串起来连接为可执行eval的estr
   * **/
  for (var i = 0; i < js.length; ++i) {
    estr += 'output+=text[' + i + '];';
    estr += js[i];
 
  }
  estr += 'output+=text[' + js.length + '];';
 
  estr += 'return output;';
 
  var fun =new Function('vars','text',estr);
  return function(data){
    return fun.apply(null,[data,text]);
  }
}

2. add.html

<!DOCTYPE html>
 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Lumino Pro - Dashboard</title>
<link href="__SOURCE__/css/bootstrap.min.css" rel="stylesheet">
<link href="__SOURCE__/css/datepicker3.css" rel="stylesheet">
<link href="__SOURCE__/css/styles.css" rel="stylesheet">
<link href="__SOURCE__/css/Table.css" rel="stylesheet">
<link href="__SOURCE__/css/dt.css" rel="stylesheet">
<link href="__SOURCE__/css/plus/buttons.css" rel="stylesheet">
<link href="__SOURCE__/css/file.css" rel="stylesheet">
<link href="__SOURCE__/css/webuploader.css" rel="stylesheet">
<link href="__SOURCE__/css/plus/bootstrap-switch.min.css" rel="stylesheet">
<link href='http://fonts.useso.com/css"__SOURCE__/css/rgba-fallback.css" rel="stylesheet">
<script src="/UploadFiles/2021-04-02/html5shiv.js">

希望本文所述对大家学习javascript程序设计有所帮助。

js,HTML5,Ajax文件上传,js文件上传进度条