XMLHttpRequest 在Html5 规范中已经有全新的变化，规定了XMLHttpRequest Level 2规范（目前最新版本）包含下列新的特性：

  1. 处理字节流，例如作为上传或者下载的File，Blob，FormData对象
  2. 上传或者下载中的进度事件
  3. 跨站点请求
  4. 允许创建匿名请求
  5. 可以设置请求超时

在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常，上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户，需要注意的是这种方式解决了不需要服务器端做任何改变，至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变，这使得开发者适应这种技术相当容易。

 <!DOCTYPE html>

 <html>

 <head>

     <title>Upload Files using XMLHttpRequest - Minimal</title>

     <script type="text/javascript">

       function fileSelected() {

         var file = document.getElementById('fileToUpload').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("fileToUpload", document.getElementById('fileToUpload').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", "upload.do");//修改成自己的接口

         xhr.send(fd);

       }

       function uploadProgress(evt) {

         if (evt.lengthComputable) {

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

           document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';

         }

         else {

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

         }

       }

       function uploadComplete(evt) {

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

         alert(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>

 </head>

 <body>

   <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">

     <div class="row">

       <label for="fileToUpload">Select a File to Upload</label><br />

       <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>

     </div>

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

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

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

     <div class="row">

       <input type="button" onclick="uploadFile()" value="Upload" />

     </div>

     <div id="progressNumber"></div>

   </form>

 </body>

 </html>

H5上传文件的更多相关文章

  1. 用H5上传文件

    //1,第一步读取用户选中的文件 <input type="file" accept="image/*" onchange = "selecte ...

  2. H5的FormData对象完成ajax上传文件multiFile

    最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...

  3. h5属性直接控制上传文件类型

    和公司前端交互的时候发现我在选择上传文件的时候只能选择图片,其他类型,text,doc等等等等全部无法选择 仔细查看了下代码,发现归功于H5新增(??没查到资料,不确定是不是H5的)的input属性 ...

  4. [转] h5上传视频或文件编写

    Html5 finally solves an age old problem of being able to upload files while also showing the upload ...

  5. H5+MUI上传文件

    应用场景:MUI+H5+WEBAPI 今天在给我外甥女调手机端上传图片的时候,发现他是直接调用的MUI下的api,直接调取相册或者相机,到最后只看见了一个文件的路径,所以以前写的上传文件就不太好套上去 ...

  6. H5利用formData来上传文件（包括图片，doc,pdf等各种格式）方法小结！

    H5页面中我们常需要进行文件上传,那么怎么来实现这个功能呢??? 我主要谈如下两种方法. (一).传统的form表单方法 <form action="/Home/SaveFile1&q ...

  7. （H5）FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  8. H5 FormData对象的使用——进行Ajax请求并上传文件

    XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  9. FTP上传文件到服务器

    一.初始化上传控件. 1.我们这里用dropzone.js作为上传控件,下载地址http://www.dropzonejs.com/ 2.这里我们使用一个div元素作为dropzone载体. < ...

随机推荐

  1. 更新你的jar包

    jar文件:/home/resin.jar需更新包中com/caucho/server/port/Port.class类文件 方法1:jar uf resin.jar com/caucho/serve ...

  2. 利用if,else判断输入的是不是一个正整数

    static void Main(string[] args)        {            while (true)                      { Console.Writ ...

  3. activemq-5.13 在windows下部署应用

    一.下载windows压缩包 解压并双击F:\server\activemq-5.13.2\bin\win64\activemq.bat 启动,32位的系统为F:\server\activemq-5. ...

  4. 用PowerShell批量收回wsp包

    转:http://www.xuebuyuan.com/168334.html 提供wsp部署的参数:$wspnames:路径下的所有wsp文件名用逗号隔开,如"sumhtestwsp.wsp ...

  5. C# 配置文件读取与修改

    C# 配置文件读取与修改   配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...

  6. MySQL运行原理与基础架构

    1.MySQL基础 MySQL是一个开放源代码的关系数据库管理系统.原开发者为瑞典的MySQL AB公司,最早是在2001年MySQL3.23进入到管理员的视野并在之后获得广泛的应用. 2008年My ...

  7. spring--JDBC的支持--7

    7.1  概述 7.1.1  JDBC回顾 传统应用程序开发中,进行JDBC编程是相当痛苦的,如下所示: java代码: 以上代码片段具有冗长.重复.容易忘记某一步骤从而导致出错.显示控制事务.显示处 ...

  8. javaweb之servlet 全解

    ①Servlet概述 ⑴什么是Servlet Servlet是JavaWeb的三大组件之一,它属于动态资源.Servlet的作用是处理请求, 服务器会把接收到的请求交给Servlet来处理,在Serv ...

  9. 【原】Scala学习资料

    Scala是基于JVM的一种通用函数式也是面向对象编程语言,能和Java.C#等主流的编程语言无缝融合. 下面给大家推荐一些Scala的学习资料,序号靠前的重要性比较高. 1.Scala初学指南 (1 ...

  10. editpuls查找替换通配符

    1  \t    Tab character.         tab符号 2  \n    New line.              新的一行(换行符) 3  .     Matches any ...