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. MySQL修改表字段相关信息

    昨天收获颇多,首先回顾一下有关mysql的内容. 我在查询表信息时,出现了 empty set 0.00 sec 的错误,我很奇怪,仔细检查发现原来是表字段名称写错了, 于是我想修改字段名称,经过查询 ...

  2. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  3. 如何通过 WebP 自适应方案减少图片资源大小

    前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能 ...

  4. vue视频学习笔记03

    video 3 git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter( ...

  5. struts的package的name与namespace

    <struts> <constant name="struts.devMode" value="true"></constant& ...

  6. [刷题]算法竞赛入门经典(第2版) 5-14/UVa1598 - Exchange

    题意:模拟买卖,当出售价bid等于或低于出售价ask,则交易. 代码:(Accepted,0.330s) //UVa1598 - Exchange //Accepted 0.330s //#defin ...

  7. [刷题]算法竞赛入门经典(第2版) 5-6/UVa1595 - Symmetry

    题意:平面上给若干点,问它们是不是关于某垂直于x轴的直线对称. 代码:(Wrong Answer, –ms) //UVa1595 - Symmetry #include<iostream> ...

  8. 开关调色新世界BP2888电源解决方案

    LED智能方案经过几年的拼杀,已经风靡照明界.但人们渐渐发现,对照明来说,一味追求花哨的功能并不被市场所认同,而其中开关调色,以其简单易操作的特点,已逐步融入广大消费者的生活习惯中.对吸顶灯,面板灯等 ...

  9. Android学习笔记View的工作原理

    自定义View,也可以称为自定义控件,通过自定义View可以使得控件实现各种定制的效果. 实现自定义View,需要掌握View的底层工作原理,比如View的测量过程.布局流程以及绘制流程,除此之外,还 ...

  10. javascript基础-语法

    代表此属性ECMAScript 5(一般IE9+)才支持. 图解:—— 图解: undefined,null,NaN Infinity ECMAScript 5禁止修改 每个函数都是Function的 ...