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. hdu1054Strategic Game(树形DP）

    链接 归属简单树形DP 挺简单的 跟第一道一样 就是我跑偏了题意..以为要覆盖点 纠结啊 推了N久 推不出啊 然后就郁闷了 打了局游戏 边想边打 实在想不出 看下题解 跑偏了 分两种情况D 方程见代码 ...

  2. Native Fullscreen JavaScript API (plus jQuery plugin)

    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...

  3. 在User Profile Service中配置AD的同步连接

    转:http://www.360sps.com/Item/ConfigureSynchronizationConnections.aspx 如果要将Active Directory.LDAP 目录和业 ...

  4. 浏览器中的XML与JavaScript

    浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型 在 ...

  5. 【原创】LoadRunner Java Vuser开发环境配置指南

    1 编写目的 本文主要介绍Java运行环境的配置,同时通过编写HelloWorld程序,讲解在LoadRunner下如何开发简单的Java Vuser脚本.关于Java语言的深入学习,大家可以参考其他 ...

  6. sql server Case when 的用法

    sql Case 仅仅返回第一个符合条件的值,剩下的Case部分将会被自动忽略. Case 的使用有两种格式:简单Case函数和Case搜索函数. 简单Case 函数: Case sex when ' ...

  7. 【HTML】Advanced4：Accessible Links

    1.Tab <ul> <li><a href="here.html" tabindex="1">Here</a> ...

  8. bzoj 1922 [Sdoi2010]大陆争霸（最短路变形）

    Description 在一个遥远的世界里有两个国家:位于大陆西端的杰森国和位于大陆东端的 克里斯国.两个国家的人民分别信仰两个对立的神:杰森国信仰象征黑暗和毁灭 的神曾·布拉泽,而克里斯国信仰象征光 ...

  9. HW3.9

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  10. Zabbix lld发现磁盘监控

    一.软件版本 操作系统:CentOS-6.5-x86_64 zabbix版本:3.0.3 二.脚本编写: 1.python版本: #!/usr/bin/env python import json i ...