文档章节

收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示

PHer
 PHer
发布于 2014/06/23 14:16
字数 325
阅读 1405
收藏 2

ajax收集表单数据

    分为两种情况:

            一 有form表单情况

  <script type="text/javascript">
                var logFormObject=document.getElementById('logon');

                function acceppt3(){
                        var xhr = creatXMLHttpRequest();
                    
                        var fd = new FormData(logFormObject);
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status==200){
                                var arr=xhr.responseText;
                        
                                console.log(arr);
                            }
                        }
                xhr.open('post','json2.php');
                xhr.send(fd);
            }
          </script>

表单部分:

<form action="form1"  method="post"  id="logon">
  <input name="usr"  type="text"/>
  <input name="pass">
  </form>
json2.php部分:
<?php
    echo $_POST['usr'],"|",$_POST['pass'];


在send方法中发送的应该是整个FormData对象 而不是getElementById获得元素节点对象。

    在url地址页面。中我们使用POST数组,数组下表就是表单中的name属性值.

    创建FormData对象, 如果有表单对象元素结点 通过dom操作获得的

    如  

var xhr = creatXMLHttpRequest();
var fd = new FormData(logFormObject);

那 如果没有form元素的html页面 我们是否发送form数据呢?

            第二 没有form元素

//获得元素结点对象
var xhr = document.getElementById("idname");
var fd = new FormData(logFormObject);
fd.append('usrname','zhengdia');
fd.append('pass',1546875);
这就相当于在我们的fd表单对象中放入了两个name 属性分别等于usrname和pass.

总结:

1.       通过FormData给服务器传递数据

a)         通过form元素节点对象实现

b)        通过formData的方法append()实现数据整合


© 著作权归作者所有

共有 人打赏支持
PHer
粉丝 4
博文 121
码字总数 38443
作品 0
成都
程序员
jquery+php实现ajax单个上传

HTML部分 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <div class="btn"> <span>添加附件</span> <inpu......

魏邪乎
2014/06/05
0
0
Uploadify+MultipartFile实现文件上传

一.form表单(截选) <table id="myTable" border="0" cellspacing="0" cellpadding="0"> <tr id='myTr'> <td class="label">合同附件:</td> <td style="padding:0" width="23%"><input class......

Romanceling
2016/08/23
302
0
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

FancyUpload FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 FancyUpload Mootools jqUploader 结合Javascript与Flash开发,拥有...

老朱教授
2017/10/01
0
0
Winform开发框架之附件管理应用

在很多常规的管理系统里面,都可能有附件管理的需求,在我做的一系列医疗行业的病人信息管理系统里面,都希望能很好的管理病人的相关资料,分门别类的进行存储,需要的时候可以预览查看,那么...

walb呀
2017/12/04
0
0
Webdriver无法使用Flash控件上传附件

对于一般的上传附件 driver.findElement(By.xpath("//input[@type='file']"))).sendKeys("C:\testContent.pdf"); //这个比较好理解,先定位,然后把文件的路径放入输入内容。 ABiz的附件比较...

PengMei
2014/05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

兄弟连区块链入门教程eth源码分析core-vm源码分析(二)

  兄弟连区块链入门教程eth源码分析core-vm源码分析(二),合约创建 Create 会创建一个新的合约。        // Create creates a new contract using code as deployment cod...

兄弟连区块链入门教程
7分钟前
0
0
python打造特别火的一个小游戏,16行代码实现3D撞球小游戏!

以下是制作上面炫酷动画所需的全部代码: 我们需要三组刚体(当您在Blender的对象上打开一个刚体的属性时,Blender将模拟与其它刚体的碰撞): 1.平面 第2行代码创建了一个简单的平面,立方体...

糖宝lsh
10分钟前
0
0
SQL语言分类

SQL(Structure Query Language)语言是数据库的核心语言。 SQL语言共分为四大类: 数据定义语言DDL,数据操纵语言DML,数据查询语言DQL,数据控制语言DCL。 数据定义语言DDL 数据定义语言DDL...

阿dai
12分钟前
0
0
UICollectionView的headerView、footerView使用以及与UITableView加载headerView、footerView的区别

前序 最近在一家公司实习,学习一些ios的知识。因为以前没有使用过UICollectionView,所以带我的导师让我仿照公司APP中的一个UICollectionView自己做一个练练手。期间遇到了一些问题:我们知...

壹峰
14分钟前
0
0
IMP-00017: following statement failed with ORACLE error 20005:

/*报错信息Export file created by EXPORT:V11.02.00 via conventional pathimport done in AL32UTF8 character set and AL16UTF16 NCHAR character setexport client uses ZHS16GBK char......

fengzhi714
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部