<!DOCTYPE html>

<html>

 <head>

 <title>html5_2.html</title>

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <style type="text/css">

  #parent{width:550px; height:10px; border:2px solid #09F;}

  #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}

 </style>

 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>

 <script type="text/javascript">

 function showPic(){

  var pic = $("#pic").get(0).files[0];

  $("img").prop("src" , window.URL.createObjectURL(pic) );

  uploadFile();

 }

 function uploadFile(){

  var pic = $("#pic").get(0).files[0];

  var formData = new FormData();

  formData.append("file" , pic);

  /**

   * 必须false才会避开jQuery对 formdata 的默认处理

   * XMLHttpRequest会对 formdata 进行正确的处理

   */

  $.ajax({

   type: "POST",

   url: "upload",

   data: formData ,

   processData : false,

   //必须false才会自动加上正确的Content-Type

   contentType : false ,

   xhr: function(){

    var xhr = $.ajaxSettings.xhr();

    if(onprogress && xhr.upload) {

     xhr.upload.addEventListener("progress" , onprogress, false);

     return xhr;

    }

   }

  });

 }

 /**

  * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

  */

 function onprogress(evt){

  var loaded = evt.loaded;     //已经上传大小情况

  var tot = evt.total;      //附件总大小

  var per = Math.floor(100*loaded/tot);  //已经上传的百分比

  $("#son").html( per +"%" );

  $("#son").css("width" , per +"%");

 }

 </script>

 </head>

 <body>

 <img width="400" height="250"/><br />

 <input type="file" id="pic" name="pic" onchange="showPic()"/>

 <input type="button" value="上传图片" onclick="uploadFile()" /><br />

 <div id="parent">

  <div id="son"></div>

 </div>

 </body>

</html>

基于HTML5 Ajax文件上传进度条如何实现（jquery版本）的更多相关文章

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

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  2. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  3. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

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

    spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...

  5. iOS_文件上传进度条的实现思路-AFNettworking

    iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...

  6. asp.net文件上传进度条研究

    文章:asp.net 文件上传进度条实现代码

  7. Layui多文件上传进度条

    Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...

  8. 利用Bootstrap简单实现一个文件上传进度条

    © 版权声明:本文为博主原创文章,转载请注明出处 说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...

  9. vue多文件上传进度条 进度不更新问题

    转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...

随机推荐

  1. delphi 2010安装unidac

    UniDAC是一个功能强大的非可视化跨数据库的数据访问组件,可用于Delphi,Delphi for .NET,C++Builder,and Lazarus (Free Pascal).它提供了对流行 ...

  2. jetty中war包解压路径

    这是个很奇怪的问题,如果下载好了jetty直接放入war包运行,项目会被解压到C盘的临时文件夹中.但是如果你在${JETTY_HOME}文件夹,也就是jetty解压后的根目录中新建,注意是新建一个wo ...

  3. git 本地文件里内容 操作记录

    本地环境文件合并分支(以下的都分别 commit提交了的) [一.分支[追加] 和 [新增] 新信息 合并主线  情景] 分支内容: dr.find_element_by_id("su&qu ...

  4. zabbix snmp 协议监控 dell iRDAC

    转摘:http://blog.csdn.net/wanglei_storage/article/details/52789921 http://blog.csdn.net/wanglei_storag ...

  5. 装饰器1、无参数的装饰器 2、有参数的装饰器 3、装饰器本身带参数的以及如果函数带return结果的情况

     装饰器分成三种: 1.无参数的: 2.有参数的: 3.装饰器本身带参数的. 装饰器decorator又叫语法糖 定义:本质是函数,器就是函数的意思.装饰其他函数.就是为其他函数添加附加功能. 原则: ...

  6. bootstrap-datetimepicker如何只显示到日期

    bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1 ...

  7. 接口规范，js处理json，php返回给ajax的数据格式

    ajax异步获取php数据. 一般php会在后台处理请求,并返回结果给前端. 必须是echo的方式,不然ajax获取不到. 返回的类型包括,字符串,数字,json. 最常用的就是json. 返回后,前 ...

  8. python开发mysql:表关系&单表简单查询

    一 一对多,多对一 1.1 建立多对一 ,一对多的关系需要注意 先建立被关联的表,被关联的字段必须保证时唯一的 在创建关联的表,关联的字段一定是可以重复的 1.2 示例: 出版社 多对一,多个老师可能 ...

  9. C#使用自定义字体

    /// <summary> /// 设置字体 /// </summary> /// <param name="path">字体文件路径,包含字体 ...

  10. Python web框架 Tornado（二）异步非阻塞

    异步非阻塞 阻塞式:(适用于所有框架,Django,Flask,Tornado,Bottle) 一个请求到来未处理完成,后续一直等待 解决方案:多线程,多进程 异步非阻塞(存在IO请求): Torna ...