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

来源：动视网责编：小采时间：2020-11-27 15:09:45

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

利用Jquery使用HTML5的FormData属性实现文件上传:本文给大家介绍的是利用Jquery使用HTML5的FormData属性实现对文件的上传的方法和实例，非常的实用，有需要的小伙伴可以参考下。1.利用Jquery使用HTML5的FormData属性实现对文件的上传在HTML5以前我们如果需要实现文件上传服务器等功能的时候，有时候我们不得

推荐度：

点击下载本文 文档为doc格式

导读利用Jquery使用HTML5的FormData属性实现文件上传:本文给大家介绍的是利用Jquery使用HTML5的FormData属性实现对文件的上传的方法和实例，非常的实用，有需要的小伙伴可以参考下。1.利用Jquery使用HTML5的FormData属性实现对文件的上传在HTML5以前我们如果需要实现文件上传服务器等功能的时候，有时候我们不得

本文给大家介绍的是利用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代码如下：

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

推荐度：

点击下载本文 文档为doc格式

标签：上传上传文件 File

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐