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. eclipse 批量 查询 替换

    对于 要对多个jsp 或 java文件中的 某个字符串 方法 参数 之类的进行统一更改,一直很头疼,直到昨天用了 urlrewriter 的 xml 配置文件 才恍然大悟,可以用 regular ex ...

  2. 关于数组和List之间相互转换的方法

    1.List转换成为数组:返回数组的运行时类型.如果列表能放入指定的数组.否则,将根据指定数组.如果指定的数组的元素比列表的多),那么会将存储列表元素的数组. 返回:包含列表元素的list.add(& ...

  3. 以编程方式使用 Word 中的内置对话框

    使用 Microsoft Office Word 时,有时需要显示用户输入对话框.虽然可以创建自己的对话框,您也许还希望采用使用 Word 中内置对话框的方法,这些对话框在Application 对象 ...

  4. PHP 'ext/gd/gd.c'信息泄漏漏洞

    漏洞版本: PHP 5.5.x 漏洞描述: CVE ID:CVE-2014-2020 PHP是一种HTML内嵌式的语言. PHP 'ext/gd/gd.c'没有检查数据类型,允许远程攻击者使用字符串或 ...

  5. 【C++】命令行Hangman #2015年12月15日 00:20:27

    增加了可以在构造Hangman对象时通过传入参数设定“最大猜测次数”的功能.少量修改.# 2015年12月15日 00:20:22 https://github.com/shalliestera/ha ...

  6. Dell笔记本禁用触摸板的方法

    一·找到触摸板驱动所在的文件夹(其他型号 的本本,请自己探索一下,找到驱动在哪就行),一般 在 C:\program files\delltpad 中(若没有请下载安 装 ),如图: 二·双击 Del ...

  7. [Stephen]Android的adb无法启动

    1.程序中运行收入cmd,打开dos命令窗口,在窗口中依次运行abd kill-server和  adb start-server 尝试重启adb服务 2.如果依然启动失败  dos命令窗口中键入  ...

  8. Asm Shader Reference --- Shader Model 1 part

    ps部分 ps_1_1,ps_1_2,ps_1_3,ps_1_4 总览                   Instruction Set                               ...

  9. tmux快捷键`

    Ctrl+b 激活控制台:此时以下按键生效 系统操作 ? 列出所有快捷键:按q返回 d 脱离当前会话:这样可以暂时返回Shell界面,输入tmux attach能够重新进入之前的会话 D 选择要脱离的 ...

  10. HTML 网页游戏 2048

    新手只会一点html和css,javascript基本不会,更别提jQuery了= = 跟着慕课网的教学视频(视频地址:http://www.imooc.com/learn/76)一点点做的,由于自己 ...