<!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. 浅谈FPGA有限状态机

    状态机几乎可以实现一切时序电路. 有限状态机(FiniteStateMachine, FSM),根据状态机的输出是否与输入有关,可分为Moore型状态机和Mealy型状态机.Moore型状态机输出仅仅 ...

  2. 移植LWIP（ENC28J60）

       上图就是整个移植的基本思路,非常清晰的三个层次.其实想想,本质上就是收发数据,只是LWIP协议通过对数据的封装可以实现网络传输.从图中我们就可以看到这里首先需要ENC28J60的驱动,这个驱动需 ...

  3. Android BindService中遇到的一个小问题

    今天在使用BindService的时候遇到个小问题,我希望通过Bindservice获取到这个服务,然后执行服务内的某个自定义方法,如下: if(bindService==null){ Intent ...

  4. Ansible之Playbooks的when语句

    在使用ansible做自动化运维的时候,大多数情况下都执行某些任务的时候都需要依赖某个变量的值或者是上一个任务的执行结果.如,根据facts信息中的系统版本相关的信息来确定使用哪种包管理器安装软件.A ...

  5. python's twenty_fourth day for me 内置方法

    str  repr: 1,当需要使用__str__的场景时找不到__str__就找__repr__ 2,当需要使用__repr__的场景时找不到__repr__的时候就找父类的repr. 3,双下re ...

  6. C#通用模块专题

    开源 程序设计 常用组件 加载图片,播放音乐.视频,摄像头拍照 文件读写(txt.xml.自定义文件格式(后缀名)) 串口通信 稳定的串口读写:http://blog.csdn.net/kolvin2 ...

  7. 当我们谈 SQL 优化时在谈些什么？

    作者 |孙银行编辑 | 顾乡 背景 Mysql数据库作为数据持久化的存储系统,在实际业务中应用广泛.在应用也经常会因为SQL遇到各种各样的瓶颈.最常用的Mysql引擎是innodb,索引类型是B-Tr ...

  8. JavaScript之BON

    1.windows对象 全局作用域: 2.窗口关系及框架 如果页面包含框架,则每个框架都有自己的window对象,并且保存在iframes集合中,在iframe集合中,可以通过数值索引(从0开始,从左 ...

  9. export LD_LIBRARY_PATH 的使用

    对linux不是很熟,之前只是听说过可以设置程序共享库位置也就是 使用 “export LD_LIBRARY_PATH” 今天用了用,感觉还挺不错,也很常用. 比如你编译了一个so 而这个so 同时又 ...

  10. MySQL分组条件，group by order by limit 顺序

    having 中如果没有用聚合函数(必须sum,min),涉及到的字段名称必须在select 中有对应字段名称才可以,用到聚合函数可以不必在select中有相应字段名称的 limit 2,3:2表示从 ...