时间:2021-07-01 10:21:17 帮助过:38人阅读
1.利用Jquery使用HTML5的FormData属性实现对文件的上传
在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面。
注意事项:FormData属性必须依赖于HTML5,所以如果你按照本文代码实现的功能,则浏览器必须升级为最新(支持HTML5 FormData属性)。
2.HTML页面代码如下
3.CSS代码如下:
/*源文件头信息: <copyright file="FileUpload.js"> Copyright(c)2014-2034 Kencery.All rights reserved. 个人博客:http://www.cnblogs.com/hanyinglong 创建人:韩迎龙(kencery) 创建时间:2015-6-24 </copyright>*/ body { font-family: "微软雅黑"; font-size: 12px; } .input-file { overflow: hidden; position: relative; } .input-file input { opacity: 0; filter: alpha(opacity=0); font-size: 100px; position: absolute; top: 0; right: 0; } #uploadTable { width: 500px; border-collapse: collapse; border: 1px solid Silver; }
4.JS代码如下:
以上就是利用Jquery使用HTML5的FormData属性实现文件上传的详细内容,更多请关注Gxl网其它相关文章!