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. 安装db2 提示不是有效的win32应用程序?

    问题已经解决了,就是版本的问题.我在官网上下载的最新版本(10.5),网上说是最新的版本不支持xp系统,完了我下了9.7的版本,安装没有一点点问题

  2. Innodb加载数据字典 && flush tables

    测试了两个case,属于之前blog的遗留问题: innodb如何加载数据字典 flush tables都做了什么操作 先来看下innodb加载数据字典: 首次使用:select * from tt; ...

  3. bzoj2661

    不难想到,先枚举建图然后跑最大费用最大流 也不难想到一种将每个数拆成两个点i1,i2,所有满足条件的数之间 把所有满足条件之间的数x,y连边x1--->y2,y1--->x2,流量为1,费 ...

  4. powerdesigner导出SQL时大写转换

    打开物理模型,点击菜单“Tools->Execute Commands -> Edit/Run Script...",或者快捷键(Ctrl+Shift+X)执行下面vbscrip ...

  5. uDig介绍

    一 安装配置Java平台此步骤不必多说,如果您是Java开发者可以跳过.如果您的机器上没有Java平台,那么请到http://java.sun.com下载jdk,当下最新的版本是1.6.安装jdk,请 ...

  6. 跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码

    跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码 第一步:插入QQ摄像头,安装好驱动(有的可能免驱动) 第二步:打开HDevelop,点击助手-打开新的Image Acquisitio ...

  7. 查看目标文件是否是以-fPIC编译的， ar 打包命令将多个静态库打包到一个里面

    readelf --relocs foo.o | egrep '(GOT|PLT|JU?MP_SLOT)' 上句大多数时候(和平台有关)可以正确判断是否是以fPIC选项编译的,如果输出为空,基本可以表 ...

  8. puppet案例

    实例一.文件分发描述:通过puppet服务端可以向被管理机(客户端)上推送文件,方法是使用file类型的source属性 第一步:#vi /etc/puppet/fileserver.conf  1  ...

  9. JavaScript- The Good Parts Chapter 6

    Thee(你) I’ll chase(追逐:追捕) hence(因此:今后), thou(你:尔,汝) wolf in sheep’s array.—William Shakespeare, The ...

  10. Delphi- 内置数据库的使用例子BDE

    以前开发时经常使用一些大型的数据库,像这样小的数据库还是前段时间才看到.看看Delphi怎么使用内置的数据库, 先在BDE里拉两个数据库控件.DataBase和Table,然后再拉两个数据库控件Dat ...