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. poj棋盘分割（记忆化）

    http://poj.org/problem?id=1191 黑书上P116 想了挺久 没想出来 想推出一公式来着 退不出来.. 想偏了  正解:递归 #include <iostream> ...

  2. oracle的一种字符串处理机制。

    orcale会把空字符串当成Null进行存储,sqlserver直接存储空字符串

  3. BZOJ_1613_ [Usaco2007_Jan]_Running_贝茜的晨练计划_(动态规划)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1613 n分钟,疲劳值上限是m,开始时疲劳值为0.第i分钟可以跑d[i]米.在某一时刻,如果疲劳 ...

  4. InstallShield2008脚本安装制作方法Setup

    //=========================================================================== // //  File Name:    S ...

  5. 【转】Getting xrdp to work on CentOS 6.4

    vi /etc/selinux/config SELINUX=disabled reboot Step 1: #rpm -Uvh http://pkgs.repoforge.org/rpmforge- ...

  6. Restful与webService区别

    有好多人问我们在设计底层服务的时候到底是应该选择目前最流行的RestFul架构还是选择老牌的webService呢?今天我就将这两个概念做一下阐述,到底什么情况下选择什么比较合理. 首先需要了解:RE ...

  7. CodeForces - 445A - DZY Loves Chessboard解题报告

    对于这题本人刚开始的时候觉得应该用DFS来解决实现这个问题,但由于本人对于DFS并不是太熟,所以就放弃了这个想法: 但又想了想要按照这个要求实现问题则必须是黑白相间,然后把是字符是'B'或'W'改为' ...

  8. 代码-Weka的NaiveBayes类

    package kit.weka;   import java.io.File; import weka.classifiers.CheckClassifier; import weka.classi ...

  9. EGit插件安装（附Eclipse版本对应表）

    最近eclipse添加egit插件,通过网上的方法下载安装后不显示git选项.通过官网了解到egit的版本对应相应的eclipse版本. 如果你安装了最新版本,需要先卸载重启eclipse后重新安装兼 ...

  10. POJ2299: Ultra-QuickSort-合并排序解决逆序数问题

    #include<iostream> #include<malloc.h> using namespace std; long long ans; void merge(int ...