实践Html5的上传文件

技术点：

1.通过input的change事件获取文件信息：

onchange = function() {

this.files

}

2.文件对象中的文件信息

https://developer.mozilla.org/zh-CN/docs/Web/API/File

主要是name,size,type这三个属性

3.dom对象的classList属性

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

把属性的className对象化，不用再像以前使用拼接字符串的方式操作。

4.使用FileReader异步读取本地文件或文件对象

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

时间： 2024-10-07 06:00:10

实践Html5的上传文件的相关文章

C# 结合html5 批量上传文件和图片预览

html5 新特性 <input id="imgsf" type="file" name="imgsf" multiple /> input file 中增加 multiple 属性可以选择多文件.IE9以下版本不兼容 <form id="form1" method="post" action="upload_json.ashx" enctype="m

其实 html5 上传文件挺简单的 , 直接 new FormData(); 这个基于XMLHttpRequest 2 新增的API 就好了你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下: <input type="file" id="file" /> <script type="text/javascript"> var oMyForm = new F

jQuery+HTML5实现上传文件预览

<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-1.11.2.min.js"></script> </he

HTML5 jQuery+FormData 异步上传文件，带进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="../resources/css/common.css" rel="stylesheet" /> <script src="../resources/js/jquery-2.1.4.js"></script> <

HTML5关于上传API的一些使用（上）

HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest2.0出来之后,完全可以使用HTML5的上传解决方案,能够非常方便的进行二进制上传进度的显示,上传图片的本地预览,甚至可以做到断点续传,分片上传,多文件上传等各种复杂的底层功能. 首先回顾一下XMLHttpRequest1.0的传输过程关于XMLHttpRequest 初始化XMLHttpRequ

Ajax方式上传文件

用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title>

js上传文件

一.原始的XMLHttpRequestjs上传文件过程(参考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码:

jQuery上传文件显示进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../js/jquery.js"></script> </head> <body> <h2>HTML5异步上传文件,带进度条(jQuery)</h2> <form method="post"

原生API实现拖拽上传文件实践

功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉及到的API: 1.HTML5的拖拽事件:dragenter,dragover,drop等 2.XMLHttpRequest Level2 3.FormData 4.(扩展:HTML5的File API) 概述: 1.利用拖拽实践的API将一个普通的div自定义成一个放置目标,这里有一个技巧是放置