vc汽车资讯网
您的当前位置:首页利用Jquery使用HTML5的FormData属性实现文件上传

利用Jquery使用HTML5的FormData属性实现文件上传

来源:vc汽车资讯网


本文给大家介绍的是利用Jquery使用HTML5的FormData属性实现对文件的上传的方法和实例,非常的实用,有需要的小伙伴可以参考下。

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代码如下:

        
显示全文