ajax上传进度条

<script type="text/javascript">
  function register(){
    var frm = document.getElementById(‘frm‘);
    var fd = new FormData(frm);
    var request = new XmlHttpRequest();
    request.open(‘post‘, ‘./demo.php‘);
    request.onreadystatechange = function(){
      if (request.readystate == 4 && request.status == 200) {
          if(request.responseText == ‘1‘){
            alert(‘上传成功!‘);
          }
      }
      request.send(fd);
      //上传进度条
      request.upload.onprogress = function(e){
        var total = e.total;//总大小
        var loaded = e.loaded; //已上传的大小
        var percent = Math.floor(loaded/total*100);
        document.getElementById(‘in‘).style.width = percent+‘%‘;
        document.getElementById(‘in‘).innerHTML = percent+‘%‘;

      }
    }
  }
</script>
</head>
<body>
<form id="frm">
  用户名:<input type="text" name="username"><br>
  头像:<input type="file" name="face"><br>
  <div id="out">
    <div id="in"></div>
  </div>
  <input type="button" value="上传" id="btn">
</form>
</body>

原文地址:https://www.cnblogs.com/wangshengl9263/p/9033485.html

时间: 2024-10-07 14:20:18

ajax上传进度条的相关文章

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示

jQuery文件上传插件jQuery Upload File 有上传进度条

jQuery文件上传插件jQuery Upload File 有上传进度条 2015年05月15日 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度条显示.标准HTML form文件上传,也就是说,只要服务端支持接收multipart/form-data格式数据就能使用此上传插件. 本站web端文件文件提交即使用此插件,效果如下: 浏览器支持 浏览器支持:IE 8.0,IE 9.0,IE 10.0,Firefox,Saf

struts2实现文件上传进度条(前端JS+Java)(自我整理)

需要做一个文件上传进度的效果,结合网上资料和自己的实践后,这里做一个整理 步骤如下: 1.重写.自定义JakartaMultiPartRequest类 <span style="font-size:12px;">package com.hikvision.fileUploadProcess.interceptor; import java.io.IOException; import javax.servlet.http.HttpServletRequest; import

spring定时任务-文件上传进度条

spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.2.3</version> </depen

ASP.Net 上传进度条的实现方法

对于加载时间比较长的ASP.NET页面,我们可以在客户端浏览器中显示进度条来显示页面正在装载.下面就是具体的实现过程: 新建项目,名字为WebPortal,在项目类型中选择Visual C#项目或者Visual Basic项目都可: 在模板类型中选择ASP.NET Web应用程序: 位置里输入:http://localhost/WebPortal: 添加新项:名字为ShowProgress的Web窗体. 在您的Web窗体ShowProgress.aspx上添加任何其他的Web服务器控件. 在Sh

Struts2 文件上传 进度条显示

参考成功博客:http://blog.sina.com.cn/s/blog_bca9d7e80101bkko.html 待测试博客:http://blog.csdn.net/z69183787/article/details/52536255 Struts2 文件上传 进度条显示

JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等

原文:JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等 源代码下载地址:http://www.zuidaima.com/share/1550463319542784.htm JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等

Layui多文件上传进度条

Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="fileList">选择多文件</button

使用html5实现文件上传进度条

html <div id="file"> <input type="file" name="ver" id="ver"/> <font color="red">*(apk,ipa目前为自动重命名)</font><br /> <div class="progress"><span class="bgpr