最近做项目发现，在文件上传的过程中，增加进度条，能大大改善用户体验。本例介绍带进度条的文件上传

环境搭建

　　参考：【Java】JavaWeb文件上传和下载。

原生ajax上传带进度条

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

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

 <title>文件上传 原生ajax上传</title>

 <style type="text/css">

 .container{

     width: 200px;

     height: 20px;

     background-color: gray;

 }

 #progress{

     height: 20px;

     background-color: orange;

     display: inline-block;

 }

 </style>

 </head>

 <body>

     <form action="${pageContext.request.contextPath }/upload"

         enctype="multipart/form-data" method="post">

          上传文件1: <input type="file" name="file1" id="file"><br />

          <div class='container'>

              <span id="progress"></span>

          </div>

     </form>

     <br>

     <button onclick="fileSelected()">文件信息</button><button onclick="uploadFile()">确认上传</button>

     <div id="info">

         <div id="fileName"></div>

         <div id="fileSize"></div>

         <div id="fileType"></div>

     </div>

     <div id="result"></div>

     <script>

         function fileSelected() {

             var file = document.getElementById('file').files[0];

             if (file) {

                 var fileSize = 0;

                 if (file.size > 1024 * 1024)

                     fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

                 else

                     fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                 document.getElementById('fileName').innerHTML = 'Name: ' + file.name;

                 document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;

                 document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

             }

         }

         function uploadFile() {

             var fd = new FormData();

             fd.append("file", document.getElementById('file').files[0]);

             var xhr = new XMLHttpRequest();

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

             xhr.addEventListener("load", uploadComplete, false);

             xhr.addEventListener("error", uploadFailed, false);

             xhr.addEventListener("abort", uploadCanceled, false);

             xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口

             xhr.send(fd);

         }

         function uploadProgress(evt) {

             if (evt.lengthComputable) {

                 var percent = Math.round(evt.loaded * 100 / evt.total);

                 document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';

                 document.getElementById('progress').style.width = percent.toFixed(2) + '%';

             }

             else {

                 document.getElementById('progress').innerHTML = 'unable to compute';

             }

         }

         function uploadComplete(evt) {

             /* 服务器端返回响应时候触发event事件*/

             document.getElementById('result').innerHTML = evt.target.responseText;

         }

         function uploadFailed(evt) {

             alert("There was an error attempting to upload the file.");

         }

         function uploadCanceled(evt) {

             alert("The upload has been canceled by the user or the browser dropped the connection.");

         }

     </script>

 </body>

 </html>

　　运行效果：
　　　　

Jquery ajax上传带进度条

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

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

 <title>文件上传 jquery上传</title>

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

 <style type="text/css">

 .container{

     width: 200px;

     height: 20px;

     background-color: gray;

 }

 #progress{

     height: 20px;

     background-color: orange;

     display: inline-block;

 }

 </style>

 </head>

 <body>

     <form action="${pageContext.request.contextPath }/upload"

         enctype="multipart/form-data" method="post">

          上传文件1: <input type="file" name="file1"><br />

          <div class='container'>

              <span id="progress"></span>

          </div>

     </form>

     <br>

     <button onclick="upload()">确认上传</button>

     <div id="info"></div>

     <div id="result"></div>

     <script>

         var totalSize = 0;  

         //绑定所有type=file的元素的onchange事件的处理函数

         $(':file').change(function() {

             var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了

             name = file.name;

             size = file.size;

             type = file.type;

             url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片  

             totalSize += size;

             $("#info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);  

         });  

         function upload() {

             //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");

             var formData = new FormData($('form')[0]);  

             //ajax异步上传

             $.ajax({

                 url: "${pageContext.request.contextPath }/upload",

                 type: "POST",

                 data: formData,

                 xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数  

                     myXhr = $.ajaxSettings.xhr();

                     if(myXhr.upload){ //检查upload属性是否存在

                         //绑定progress事件的回调函数

                         myXhr.upload.addEventListener('progress',progressHandlingFunction, false);

                     }

                     return myXhr; //xhr对象返回给jQuery使用

                 },

                 success: function(result){

                     $("#result").html(result);

                 },

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

                 processData: false  //必须false才会避开jQuery对 formdata 的默认处理

             });

         }         

         //上传进度回调函数：

         function progressHandlingFunction(e) {

             if (e.lengthComputable) {

                 $('#progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条

                 var percent = e.loaded/e.total*100;

                 $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");

                 $('#progress').css('width', percent.toFixed(2) + "%");

             }

         }

     </script>

 </body>

 </html>

　　运行效果：
　　　　

　　

　　

【Web】前端文件上传，带进度条的更多相关文章

  1. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  2. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  3. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  4. Springboot 文件上传(带进度条)

    1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  5. Struts2文件上传带进度条，虽然不是很完美

    好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...

  6. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  7. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  8. php实现大文件上传带进度条

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  9. struts2多文件上传(带进度条)demo+说明

    利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...

  10. html5 文件上传 带进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. leetcode 链表类型题总结

    链表测试框架示例: // leetcodeList.cpp : 定义控制台应用程序的入口点.vs2013 测试通过 // #include "stdafx.h" #include ...

  2. 第十章 优先级队列 (b2)完全二叉堆：插入与上滤

  3. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  4. 测试用户体验相关——UI设计准则及方法

    之前跟我们uxc同学聊过一些,记录下来,方便在工作中不断渗透深入和理解,能够逐渐养成比较好的审美和对UI交互问题的敏锐的觉察力. 以问题为导向来吧... 第一个问题:一个menu中的图标一定要风格一致 ...

  5. IntelliJ IDEA 运行 Maven 项目

    1.官方文档说IntelliJ IDEA已经自身集成了maven,则不用劳心去下载maven 2.导入一个程序,看是否是maven程序的关键在于工程之中有没有pom.xml这个文件,比如这里   3. ...

  6. linux命令学习之：cd

    cd命令用来切换工作目录至dirname. 其中dirName表示法可为绝对路径或相对路径.若目录名称省略,则变换至使用者的home directory(也就是刚login时所在的目录).另外,~也表 ...

  7. 我的第一个WCF程序

    写WCF,VS需要一管理员身份呢启动,否则服务无法访问. model层 using System; using System.Runtime.Serialization; namespace MyMo ...

  8. stark组件开发之提取公共视图函数

     路由问题, 已经解决! 然后就是视图函数的问题了: 不想重复写的解决途径就是, python  类的继承了! 写一个基类, 基类定义 增删改查. 然后其他的,全部去继承他! from django. ...

  9. 梦殇 chapter one

    梦殇 chapter one 星梦 天空中飘着几片云,喝着小鸟的欢呼声,这一切似乎显得愈加可爱了. 不觉间已经到了2013年,错过的12年,似乎在向我们招手,不知道远方的朋友们,你们还好吗? 是否也会 ...

  10. CSS day49

    前端基础之CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CS ...