![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 58
麦超
这个作者很懒,什么都没留下…
展开
-
使用FormData对象提交表单
这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的。创建: 参数是一个form节点对象var fm = document.getElementById('formid');var fd = new FormData(fm);优点: (1)在以往的ajax做post请求时,当提交的数据比较原创 2016-10-12 19:36:12 · 8140 阅读 · 0 评论 -
使用FileApi实现Ajax上传文件
FileApi是HTML5的一个新特性,有了这个新特性,js就可以读取本地的文件了,然后实现真正的Ajax上传文件了,而不是iframe方法,下面会介绍api的使用,以及实现Ajax上传文件:FileApi使用定义上传控件:<input type="file" name="pic" onchange="selfile();" />当上传文件后,就会触发selfile()函数,selfile()代码:原创 2016-10-12 21:38:59 · 1227 阅读 · 0 评论 -
带进度条的Ajax文件上传
之前分享了一篇关于使用FileApi实现Ajax上传文件 的文章,里面的Ajax文件上传是不带进度条的,今天分享一篇关于带进度条的Ajax文件上传文章。效果图: 项目结构图: 12-progress-upload.html文件: 页面中主要有一个上传文件控件,有文件被选择时响应selfile()方法,接着利用js读取上传文件、创建FormData对象和xhr对象,利用xhr2的新标准,写一个监原创 2016-10-13 14:38:58 · 2200 阅读 · 2 评论 -
大文件切割上传
大家都知道php上传文件有限制,如果没有修改过php.ini文件的话,默认的上传大小限制为2M,那么该如何上传大文件了,比如说上传一个1G多的大文件,可以使用大文件切割上传的方式来解决。何为大文件切割上传? 原理:利用HTML5的新特性,将文件内容切割成分段的二进制信息,然后每次向服务器上传一段,而服务器,只需要把我们每次上传的二进制信息整合存储到一个文件中,那么最后这个文件就是所上传的文件。由于原创 2016-10-14 08:58:52 · 9249 阅读 · 4 评论 -
大文件切割上传带进度条
项目结构图: 14-slice-upload-fix.html文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传带进度条</title> <link rel="style原创 2016-10-14 12:45:16 · 1668 阅读 · 0 评论 -
AngularJS尝鲜——快递运费计算
最近想多了解关于前端的内容,毕竟是全栈的时代了,不学一点就会落伍咯。先来尝尝AngularJS吧。直接上案例:快递运费计算,我会分别使用原生JS、JQuery、AngularJS来实现。原生js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS,求快递运费</title></head>原创 2017-04-06 18:50:35 · 1469 阅读 · 0 评论 -
AngularJS尝鲜——增减商品购买量
在写商城的时候,应该都会让顾客点击+或者-来选择购买商品的数量。效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算商品总价,每件商品8元钱</title></head><script src="//cdn.bootcss.com/angular.js/1.6.3/angular.原创 2017-04-06 18:59:45 · 497 阅读 · 0 评论 -
AngularJS尝鲜——Ajax请求
AngularJS不仅仅只有双向绑定等等功能,还有发送Ajax请求的Api。效果图:请求的文件(data.php):<?php$data = [ '股市下跌', '清明小长假结束', '我要接着学习了'];echo json_encode($data);Jqurey方式<!DOCTYPE html><html lang="en"><head> <meta c原创 2017-04-06 19:07:22 · 2922 阅读 · 0 评论 -
AngularJS尝鲜——联动菜单
分享一个AngularJS写的联动菜单效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用Angular做联动菜单</title></head><script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></scr原创 2017-04-06 19:18:25 · 1074 阅读 · 0 评论