1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="../resources/css/common.css" rel="stylesheet" />
  6. <script src="../resources/js/jquery-2.1.4.js"></script>
  7. </head>
  8. <body>
  9. <h2>HTML5异步上传文件，带进度条</h2>
  10. <form method="post" enctype="multipart/form-data">
  11. 其他需要提交的信息：<input type="text" name="otherInfo"/><br/><br/>
  12. 选择要上传的文件：<br/>
  13. <input type="file" name="file" /><span></span><br/>
  14. <input type="file" name="file" /><span></span><br/>
  15. </form>
  16. <br/><br/>
  17. <input type="button" value="上传吧" onclick="upload()"/>
  18. <br/><br/>
  19. 上传进度：<progress></progress><br/>
  20. <p id="progress">0 bytes</p>
  21. <p id="info"></p>
  22. </body>
  23. <script>
  24. var totalSize = 0;
  25. //绑定所有type=file的元素的onchange事件的处理函数
  26. $(':file').change(function() {
  27. var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
  28. name = file.name;
  29. size = file.size;
  30. type = file.type;
  31. url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片
  32. $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);
  33. totalSize += size;
  34. $("#info").html("总大小: " + totalSize + "bytes");
  35. });
  36. function upload() {
  37. //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
  38. var formData = new FormData($('form')[0]);
  39. //ajax异步上传
  40. $.ajax({
  41. url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",
  42. type: "POST",
  43. data: formData,
  44. xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
  45. myXhr = $.ajaxSettings.xhr();
  46. if(myXhr.upload){ //检查upload属性是否存在
  47. //绑定progress事件的回调函数
  48. myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
  49. }
  50. return myXhr; //xhr对象返回给jQuery使用
  51. },
  52. success: function(result){
  53. $("#result").html(result.data);
  54. },
  55. contentType: false, //必须false才会自动加上正确的Content-Type
  56. processData: false  //必须false才会避开jQuery对 formdata 的默认处理
  57. });
  58. }
  59. //上传进度回调函数：
  60. function progressHandlingFunction(e) {
  61. if (e.lengthComputable) {
  62. $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
  63. var percent = e.loaded/e.total*100;
  64. $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
  65. }
  66. }
  67. </script>
  68. </html>
 

HTML5 jQuery+FormData 异步上传文件，带进度条的更多相关文章

  1. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  2. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  3. ajax 异步上传视频带进度条并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...

  4. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  5. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  6. java进行文件上传，带进度条

    网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...

  7. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

  8. IT轮子系列（四）——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  9. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

随机推荐

  1. TreeSet对非自然顺序元素的排序

    /* 1. 往TreeSet添加元素的时候,如果元素本身具备了自然顺序的特性,那么就按照元素自然顺序的特性进行排序存储. 2. 往TreeSet添加元素的时候,如果元素本身不具备自然顺序的特性,那么该 ...

  2. vector实现最大流EK算法

    序: 在之前的文章中实现了不利用STL实现EK算法,效率也较高.这次我们企图简化代码,减少变量的使用与手写模拟的代码. 注意:vector等STL的container在不开O2优化的时候实现同一个效果 ...

  3. poj2253 Frogger Dijkstra变形

    题目链接:http://poj.org/problem?id=2253 就是求所有路径的最大边权值的最小值 处理时每次找出距离当前的已选的节点的最短距离,然后更新每个未选节点的值 代码: #inclu ...

  4. [刷题]算法竞赛入门经典(第2版) 4-7/UVa509 - RAID!

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa509 - RAID! #include<iostream> ...

  5. Android studio 打开别人的工程

    Android Studio正确打开项目只需要两步,或者说找到两个文件进行简单的修改就好,最好在打开之前进行修改 (1)gradle-wrapper.properities,在项目下按照如下路径可以找 ...

  6. winform无边框窗口拖动

    无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...

  7. 如何用C#寻找100到999的所有水仙花数？

    首先解释一下何为水仙花数:水仙花数只是自幂数的一种,严格来说是三位数的个位.十位.百位的3次幂数相加等于原来的数字,称为水仙花数.(例如:1^3 + 5^3+ 3^3 = 153) 那么如何通过C#语 ...

  8. 无阻塞加载和defer、async

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...

  9. 1.搭建Maven 多模块应用 --Intellij IDEA 2016.3.5

    1.打开IDEA,file->new ->project  新建工程 2.建成的项目如下图,然后新建java class 模块: 右击工程名->new -> Module 3. ...

  10. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...